I'm learning React and I came across two different ways to create ponents. One is by Facebook and the other by AirBnB. I also saw them in the tutorials I've been watching.
This may be a stupid question, but which one is better?
Facebook:
var React = require("react");
var Component = React.createClass({
render: function(){
return (
<div>{this.props.item}</div>
);
}
});
module.exports = Component;
AirBnB:
import React from "react";
export default class Component extends React.Component {
render() {
return (
<div>{this.props.item}</div>
);
}
}
Disclaimer: I may have errors in the code, so please forgive me and just focus on the style.
I'm learning React and I came across two different ways to create ponents. One is by Facebook and the other by AirBnB. I also saw them in the tutorials I've been watching.
This may be a stupid question, but which one is better?
Facebook:
var React = require("react");
var Component = React.createClass({
render: function(){
return (
<div>{this.props.item}</div>
);
}
});
module.exports = Component;
AirBnB:
import React from "react";
export default class Component extends React.Component {
render() {
return (
<div>{this.props.item}</div>
);
}
}
Disclaimer: I may have errors in the code, so please forgive me and just focus on the style.
Share Improve this question asked Aug 5, 2016 at 19:44 Sir RubberduckSir Rubberduck 2,2765 gold badges38 silver badges72 bronze badges3 Answers
Reset to default 14React ponents:
You have 4 basic ways of creating a reusable React ponent:
Function ponents using
const MyComponent = () => {}orfunction MyComponent()+ Hooks - The current standard of creating react ponents. The ponent is a function that returns the JSX to render. Hooks replace the life-cycle methods of the class ponents.class MyComponent extends React.Component {}- the ES6 way of creating a stateful ponent. Requires transpiling via babel, which also handles JSX. If you need state, and lifecycle methods - use this.class MyComponent extends React.PureComponent {}- new in React 15.3.0. Same as React.Component, but with a PureRenderMixin like functionality, since ES6 ponents don't support mixins.React.createClass({})- the old way, doesn't require transpiling, but since you'll probably use JSX, you'll need transpiling anyway. Still appears in old React tutorials, but will be deprecated eventually.
JS modules:
Nodejs syntax (monjs) uses require() and ES6 uses import. You can use whatever you like, and even mix the two, but the ES6 modules way of import/exporting is a bit more 'standard' for react ponents. For now import is actually transpiled by babel to require anyway. Both require and import need some sort of a bundling tool, such as webpack or browserify to work in a browser.
render() vs .render:
The render() is the ES6 way of defining a method in ES6 classes.
React.createClass({}) requires a JS object literal. In ES5, defining methods in object literals uses the prop: function() {} syntax, such as render: function() syntax. btw - In ES6 you can actually write the method in the literal as render() instead.
The one from AirBnB uses an ES6 way but would require a transpiler like Babel.
ES6 is the next revision of the Javascript language
Read more: https://toddmotto./react-create-class-versus-ponent/
As they say there is more than one way to skin a cat. As it happens, there is also more than one way to create a React ponent, which is much more animal friendly!
When React was initially released, there was no idiomatic way to create classes in JavaScript, so 'React.createClass' was provided.
Later, classes were added to the language as part of ES2015, where the ability to create React ponents using JavaScript classes was added. Along with functional ponents, JavaScript classes are now the preferred way to create ponents in React.
For existing 'createClass' ponents, it is remended that you migrate them to JavaScript classes. However, if you have ponents that rely on mixins, converting to classes may not be immediately feasible. If so, create-react-class is available on npm as a drop-in replacement.
The simplest version of React ponent is a plain JavaScript function that returns a React element:
Functional ponents:
function Label() {
return <div>Super Helpful Label</div>
}
Of course with the wonders of ES6 we can just write this as an arrow function.
const Label = () => <div>Super Helpful Label</div>
These are used like this:
const Label = () => <div>Super {props.title} Helpful Label</div>
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Label title="Duper" />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
With functions you can also destructure the properties in the function signature.
It saves you from having to write props over and over again.
Components can also be ES6 classes. If you want your ponent to have local state then you need to have a class ponent.There are also other advantages to classes such as being able to use lifecycle hooks and event handlers.
Class ponents:
class Label extends React.Component {
constructor(props) {
super(props)
}
render() {
return <div>Super {this.props.title} Helpful Label</div>
}
}
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Label title="Duper" />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
There are pros and cons in both styles but functional ponents are taking over modern React in the foreseeable future.
A functional ponent is written shorter and simpler, which makes it easier to develop, understand, and test.
Class ponents can be confusing with so many uses of this. Using functional ponents can easily avoid this kind of mess and keep everything clean.
React team is supporting more React hooks for functional ponents that replace or even improve upon class ponents. React team mentioned in earlier days that they will make performance optimizations in functional ponents by avoiding unnecessary checks and memory allocations.
And as promising as it sounds, new hooks are recently introduced for functional ponents such as useState or useEffect while also promising that they are not going to obsolete class ponents. The team is seeking to gradually adopt functional ponents with hooks in newer cases, which means that there is no need to switch over the existing projects that utilize class ponents to the entire rewrite with functional ponents so that they can remain consistent.