Preface
Project address:jrainlau/react-es6
git clone https://github.com/jrainlau/react-learning
cd react-learning && npm install
npm run dev
Then the browser opens localhost:8080
Recently, I am bored at home, so I plan to do react for a while. Before that, I was a heavy user of vue, but seeing react was really very popular, so I took this opportunity to learn about react and increase my knowledge.
Most of the reference materials for studying react come from @ Ruan YifengReact Getting Started Example Tutorial. But Nguyen uses traditional methodsscript
Tags and es5 writing, so I aimed at the tutorial, through the configuration of webpack, and finally use es6 writing to rewrite the demo of the tutorial, combined with the idea of componentization, to complete the rewriting of the final demo.
Environmental configuration
The environment configuration refers to@minoooArticle of:Web pack-es6-React. Here are some key package descriptions:
Description of Package/Library Section in package.json
babel-core
Basic module of babel6
babel-eslint
ESLintIs the front-end JS code detection weapon. Andbabel-eslintYou are allowed to detect all Babel codes.
babel-loader
This package allows you to translate JavaScript files using Babel and webpack.
babel-plugin-react-transform
This plug-in encapsulates React components by any transformation. In other words, you can play with your components as you like.
babel-plugin-transform-runtime
During the Babel conversion process, show the referenced related auxiliary tools and built-in commands in detail, and automatically aggregate and populate your code without polluting the whole world.
babel-preset-es2015
This preset includes all es2015 plug-ins.
babel-preset-react
This preset includes all React plug-ins.
babel-preset-stage-0
This preset includes all plug-ins in stage 0.
eslint
JavaScript syntax detection tool: analyze potential errors and nonstandard usage of your code.
eslint-plugin-react
Plug-in for React syntax detection in ESLint.
react-transform-hmr
A React conversion device that makes it possible to thermally overload React classes by referencing the Hot Module Replacement API.
react-transform-catch-errors
Present the error message of your React component.
webpack-dev-server
Provide a server for wepack app. if there is any change in your code, the browser will automatically refresh the display, greatly facilitating the early development.
babel-runtime
Babel’s own operating environment.
In addition, I addedstyle-loader
,css-loader
,less
,less-loader
These four packages are used for loading.less
File module. (Note,less-loader
Andless
It must exist at the same time to work properly. )
Part description of files under root directory
.babelrc
What is.babelrc
Where are the documents? Those who are familiar with linux must know that the files at the end of rc usually represent files, configurations, etc. loaded automatically at runtime. It also has the same effect here. insideenv
Field, BABEL_ENV or NODE_ENV can be specified with different environment variables and compiled differently.
eslintignore
noticeeslint
Ignore files that should not be detected.
eslintrc
Eslint configuration files standardize JavaScript code and standardize writing.
Rewrite demo with es6
First of all, you can refer to this article.React on ES6+, which mentioned how to use es6 to develop react.
Use
React.Component
ReplaceReact.createClass
// The ES5 way
var Photo = React.createClass({
handleDoubleTap: function(e) { … },
render: function() { … },
});
// The ES6+ way
class Photo extends React.Component {
handleDoubleTap(e) { … }
render() { … }
}
Use
static
Keyword to complete attribute initialization (this is the content of es7, notestate
Can be passed directlystate = { key: value }
To define)
// The ES5 way
var Video = React.createClass({
getDefaultProps: function() {
return {
autoPlay: false,
maxLoops: 10,
};
},
getInitialState: function() {
return {
loopsRemaining: this.props.maxLoops,
};
},
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
},
});
// The ES6+ way
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}
state = {
loopsRemaining: this.props.maxLoops,
}
}
In
constractor
Defined instate
// The ES5 way
var Video = React.createClass({
getInitialState: function() {
return {
loopsRemaining: ...
};
}
});
//The ES6 way
class Video extends React.Component {
constructor(props) {
super(props)
this.state = {
loopsRemaining: ...
}
}
}
Modular thinking
Through the module function of es6, it is very convenient to use webpack to realize page componentization.
We have a total of 7 small demo’s, I take them as different components and finally load them into the root component:
// app.js
import React, { Component } from 'react'
import Component1 from './demo1.js'
import Component2 from './demo2.js'
import Component3 from './demo3.js'
import Component4 from './demo4.js'
import Component5 from './demo5.js'
import Component6 from './demo6.js'
import Component7 from './demo7.js'
export default class Demo extends Component {
render() {
return (
<div>
<Component1></Component1>
<Component2></Component2>
<Component3 title='Props example'></Component3>
<Component4>
<span>Hello</span>
<span>React</span>
</Component4>
<Component5 content='This is the content'></Component5>
<Component6></Component6>
<Component7></Component7>
</div>
)
}
}
Please enterMy projectCheck the code.
It can be seen that through the rewriting of es6, it is very clear and simple to implement componentization in react, and only the required components need to be import.
In addition, because I hate in-line styles very much and am a death star who does not write less, I have not defined one as recommended by the government.style object
, but throughless-loader
Where you need to define a style, bring the style require directly in, like this:
// demo7.js
render() {
let word = this.state.words
require('../less/test.less')
return (
<div>
<h3 className='test-h1'>DEMO 7, state</h3>
<p>{ word }</p>
<input type="text" onChange={ this.stateFn }/>
<hr/>
</div>
)
}
Conclusion
This demo is only used as an introduction to learning, and more deep-seated contents of reach may be updated slowly in the follow-up, such as adding react-router, redux, etc .. if this article can enlighten you, it is best. however, if there are any mistakes or omissions, please point them out and thank you ~