Recently began to teach React on video lessons. I tried to write all sorts of "things" on it and somehow came across the official documentation translated into Russian, with this example:

class Form extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('Text field value is: ' + this.state.value); } render() { return ( <div> <input type="text" placeholder="Hello!" value={this.state.value} onChange={this.handleChange} /> <button onClick={this.handleSubmit}> Submit </button> </div> ); } } ReactDOM.render( <Form />, document.getElementById('root') );

In the video lessons for which I studied I was a little wrong, namely:

  1. What is the difference from creating a component by inheriting class Form extends React.Component from ordinary React.createClass ()?
  2. Why binds this in the class constructor with bind, if it works without it?
  3. What is the general advantage of the code from the documentation over my code? (below)
 var Form = React.createClass({ getInitialState: function(){ return { value: "" } }, handleChange(e){ this.setState({value: e.target.value}); }, handleSubmit(e){ alert("Text field value is: " + this.state.value); }, render: function(){ return ( <div> <input type="text" placeholder="Hello!" value={this.state.value} onChange={this.handleChange} /> <button onClick={this.handleSubmit}> Submit </button> </div> ); } }); ReactDOM.render( <Form />, document.getElementById('root') );

Thanks in advance: 3

    2 answers 2

    These are two ways to do the same thing.
    In Facebook itself, es6 classes are considered more semantically correct and cherish themselves with an idea sometime in the distant, happy future to stop supporting React.createClass ( source , first paragraph). But it will not be in the next year or two, while createClass is not even deprecated.

    The answer to your third question: for now these are two equivalent ways.
    It is better to get used to writing es6-classes, but how it will be in the future is actually difficult to predict.

    The main differences:

    1. Classes are an es6 feature. Accordingly, all transpilator magic for full-fledged work with es6 should be present.

    2. In React.createClass is secret magic inside that automatically binders all the methods passed to createClass to this. In the components of es6-classes, they decided to refuse such a thing, because it often confused the developers, and the need to handles. From there, by the way, the answer to your second question follows: without this, it does not work.

    3. In components-es6-classes there are no mixins. The council of wise men who develop the reactor decided that the mixins are not good, well - composition. And I decided not to give the opportunity to write badly in new versions.

    4. Instead of getInitialState , the constructor used because it is decided that it is more idiomatic for the es6 classes, also propTypes is a property of the class itself, instead of the getDefaultProps method there is a property of the class defaultProps

    Perhaps there are still some differences about which I do not remember, personally in my working draft there is both a createClass in the old code and es6 classes in the new one. getInitialState autobinding and propTypes are obvious noticeable differences, es6 is usually already there, mixins are used quite rarely.

      New React developers are often confused when faced with two different styles for declaring React components. Currently, the React ecosystem is divided between the declaration of the React.createClass component:

       const MyComponent = React.createClass({ render() { return(<p>I am a component!</p>); } });

      And the declaration of the ES6 class ES6 :

       class MyComponent extends React.Component { render() { return(<p>I am a component, too!</p>); } }

      What is the difference between the components of the class React.createClass and ES6 ? And why do they both exist?

      As a prototype language, JavaScript not had classes for most of its existence. ES6 , the latest version of JavaScript , completed in June 2015 , introduced classes as синтаксичСский сахар .

      Class syntax does not represent a new object-oriented inheritance model for JavaScript. JavaScript classes provide a much simpler and more understandable syntax for creating objects and working with inheritance.

      Since JavaScript had no classes, React included its own class system. React.createClass allows you to create class components. Under the hood, your component class uses an on-demand class system implemented in React .

      With ES6 React allows you to implement classes of components that use JavaScript ES6 . The end result is the same - you have a component class. But the style is different. And one uses the custom JavaScript (createClass) class system JavaScript (createClass) , while the other uses the native JavaScript class system.

      Since then, the community has switched to ES6 class ES6 . This is for a good reason. It used createClass because JavaScript did not have a built-in class system. But ES6 received a quick adoption. And with ES6 , instead of reinventing the wheel, React can use the simple ES6 JavaScript class.

      To the developer, the differences between components created with ES6-классами and React createClass , thankfully, minimal. If you learned how to write React components using createClass , and if you ever want to use ES6 classes, you can easily find a transition.