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 isbabel- 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 downloadbabel-preset-es2015,babel-preset-react,babel-preset- stage-0,babel-plugin-transform-class-propertiesThese 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"] }

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

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

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!