Analyzing the use of arrow functions in ReactJs

This article mainly introduces the use of arrow function writing in ReactJs. It has certain reference value. Interested friends can refer to

The arrow function writing method in ES7 is really It is very convenient, and ReactJs is very popular and easy to use nowadays. It is very suitable for students with Java object-oriented experience to learn and use. When using Reacjs to build components, what should I do if I want to use arrow function writing to define functions?

First of all, if you use arrow functions to define functions directly in React components, the compilation will not pass and a syntax error will be reported.

ERROR in ./modules/Repos.js
Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lessons/01-
setting-up/modules/Repos.js: Unexpected token (4:16)

 2 | import {Link} from 'react-router';
 3 | export default class Repos extends Component{
> 4 |   handleSubmit = () => {
  |         ^
 5 |
 6 |   }
 7 |   render(){

 @ ./index.js 19:13-39

As mentioned above, the handleSubmit function definition failed, so how can you make your reactjs project support arrow function writing? The answer is babel- preset-es2015,babel-preset-React,babel-preset-stage-0,babel-plugin-transform-class-properties. Only by adding these four components can the arrow function writing method be supported.

So what should we do? First of all, of course, install and download babel-preset-es2015,babel-preset-react,babel-preset- stage-0,babel-plugin-transform-class-properties These four components.

npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-plugin-transform-class-properties

Then, add the .babelrc file in the root directory. The content of the file is

##

{
  presets: [ "react","es2015","stage-0"],
  "plugins": ["transform-class-properties"]
}

Then, in Add configuration to webpack.config.js.

module: {
   loaders: [
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' 
    }
   ]
  }

Among them, this sentence loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' needs attention. And the order must be like this, it cannot be wrong, otherwise an error will be reported.

ERROR in ./modules/Repos.js
Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lessons/01-
setting-up/modules/Repos.js: Missing class properties transform.

 2 | import {Link} from 'react-router';
 3 | export default class Repos extends Component{
> 4 |   handleSubmit = () => {
  |   ^
 5 |
 6 |   }
 7 |   render(){

 @ ./index.js 19:13-39

Okay, so you can do whatever you want and use your favorite arrow function writing method.

The above is the detailed content of Analyzing the use of arrow functions in ReactJs. For more information, please follow other related articles on the PHP Chinese website!