react.js is written in es6. It can be translated into ES5 using Babel, or it can be translated into JavaScript’s JSX using Babel. Because React’s design idea is extremely unique, it is a revolutionary innovation, outstanding performance, and code logic. But very simple. The syntax for creating components using ES6 is more concise. This syntax avoids too much React boilerplate code and uses more pure JavaScript syntax, which is more in line with JavaScript syntax habits.

The operating environment of this tutorial: windows7 system, ECMAScript 6&&react17 version, Dell G3 computer.

ReactJS is the most popular front-end library for building views. ReactJS is written in ES6 and can be translated to ES5 with Babel, or JSX of JavaScript. Because the design idea of ??React is extremely unique, it is a revolutionary innovation, has outstanding performance, and the code logic is very simple. Therefore, more and more people are starting to pay attention to and use it, and it may be the mainstream tool for web development in the future.

Comparison of React writing methods using ES6 and ES5

Creating components

Components created by ES6 class The syntax is more concise and more consistent with JavaScript. Internal methods do not need to use the function keyword.

React.createClass

import React from 'react';

const MyComponent = React.createClass({
  render: function() {
    return (
      <div>以前的方式創(chuàng)建的組件</div>
    );
  }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>ES6方式創(chuàng)建的組件</div>
    );
  }
}

export default MyComponent;

props propTypes and getDefaultProps

• To create a component using React.Component, you need to pass props to React.Component by calling super() in the constructor. In addition, props must be immutable after react 0.13.

• Since the component is created using ES6 class syntax, only methods are allowed to be defined internally, but not attributes. Class attributes can only be defined outside the class. So propTypes should be written outside the component.

• For the previous getDefaultProps method, since props are immutable, it is now defined as a property. Like propTypes, it must be defined outside the class.

React.createClass

import React from 'react';

const MyComponent = React.createClass({
  propTypes: {
    nameProp: React.PropTypes.string
  },
  getDefaultProps() {
    return {
      nameProp: ''
    };
  },
  render: function() {
    return (
      <div>以前的方式創(chuàng)建的組件</div>
    );
  }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>ES6方式創(chuàng)建的組件</div>
    );
  }
}

MyComponent.propTypes = {
  nameProp: React.PropTypes.string
};
MyComponent.defaultProps = {
  nameProp: &#39;&#39;
};

export default MyComponent;

State

Use ES6 Class syntax creates components, and the work of initializing state must be completed in the constructor. There is no need to call the getInitialState method again. This syntax is more in line with JavaScript language habits.

React.createClass

import React from 'react';const MyComponent = React.createClass({
  getInitialState: function() {
    return { data: [] };
  },

  render: function() {
    return (
      <div>以前的方式創(chuàng)建的組件</div>
    );
  }});export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  render() {
    return (
      <div>ES6方式創(chuàng)建的組件</div>
    );
  }}export default MyComponent;

this

Use ES6 class syntax to create components, class Methods in do not automatically bind this to the instance. You must use .bind(this) or arrow function => for manual binding.

React.createClass

import React from 'react';

const MyComponent = React.createClass({
  handleClick: function() {
    console.log(this);
  },
  render: function() {
    return (
      <div onClick={this.handleClick}>以前的方式創(chuàng)建的組件</div>
    );
  }
});

export default MyComponent;

React.Component(ES6)

import React,{ Component } from 'react';

class MyComponent extends Component {
  handleClick() {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>ES6方式創(chuàng)建的組件</div>
    );
  }
}

export default MyComponent;

You can also write the binding method into the constructor:

import React,{ Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick}>ES6方式創(chuàng)建的組件</div>
    );
  }
}

export default MyComponent;

Or use arrows Function =>:

mport React,{ Component } from 'react';

class MyComponent extends Component {
  handleClick = () => {
    console.log(this);
  }

  render() {
    return (
      <div onClick={this.handleClick}>ES6方式創(chuàng)建的組件</div>
    );
  }
}

export default MyComponent;

Mixins

Using ES6 syntax to create components does not support React mixins. If you must use React mixins You can only use the React.createClass method to create components.

import React,{ Component } from 'react';

var SetIntervalMixin = {
  doSomething: function() {
    console.log('do somethis...');
  },
};
const Contacts = React.createClass({
  mixins: [SetIntervalMixin],

  handleClick() {
    this.doSomething(); //使用mixin
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default Contacts;

Summary

In general, the syntax for creating components using ES6 is more concise. This syntax avoids too much React boilerplate code, and uses more pure javascript syntax, which is more Comply with javascript syntax habits. React officially does not mandate which syntax to use, you can choose a reasonable one according to your needs.

【Related recommendations: javascript video tutorial, programming video】

The above is the detailed content of Is react.js written in es6?. For more information, please follow other related articles on the PHP Chinese website!