3 ms·
Functions are components! Yay! Here's the quote: In idiomatic React code, most of the components you write will be stateless, simply composing other components
by dustingetz 11y ago
Functions are components! Yay! Here's the quote:
In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take props as an argument and return the element you want to render:
// Using an ES2015 (ES6) arrow function:
var Aquarium = (props) => {
return <Tank>{getFish(props.species)}</Tank>;
};
// Or with destructuring and an implicit return, simply:
var Aquarium = ({species}) => (
<Tank>{getFish(species)}</Tank>
);
// Then use: <Aquarium species="rainbowfish" />
- jarcane 11y agoSo in other words, Reagent? https://reagent-project.github.io/ https://reagent-project.github.io/
- kzhahou 11y agoThere are always going to be similar ideas across different languages, frameworks, and platforms. Your comment implies... some sort of equivalence between React's announcement and Reagent? I'm not sure. Maybe you're saying "this has already been done before." If that was indeed your point, it would be more constructive to point out that here is an existing library with similar ideas that might prove useful to React developers.
- btown 11y agoClojurescript is still incredibly daunting to programmers who have never known anything but C-like syntax... even though XML/JSX is practically s-expressions. So it's incredibly exciting that those types of patterns can be found in raw JS/JSX code.
- dustingetz 11y agoReagent is significantly more opinionated and eschews React state for a different state abstration. You're right though, Reagent does have functions-as-components, and you can attach lifecycle methods to functions-as-components.
- k__ 11y agoAre the return-parentheses needed? The JSX gets converted to a simple function call.
- zpao 11y agoThey're only needed if you don't start your JSX expression on the same line as the return.
- empyrical 11y ago(this is just in the chrome js console, not sure about other envs) The automatic semicolon insertion doesn't seem as bad for arrow functions, this works as expected: () => "this string is returned" I'd personally keep using the parenthesis for aesthetic reasons though.
- wereHamster 11y agoThat was possible with earlier versions of react, with slightly different syntax: {Aquarium({ species: "rainbowfish" })} I've come across many projects which defined lots of small react classes, usually with a one or two line render body, which would be better served as simple functions.
- dustingetz 11y agoSort of, those functions aren't components, so they don't render async and don't have lifecycle methods or shouldComponentUpdate. (Also unclear if these new function components are actually components)
- spicyj 11y agoThey are components in that they render later, but they don't support any lifecycle methods. We'll probably add some sort of "pure" flag via static properties on the function later.