React+webpack+es6 Environment Configuration and demo Rewriting

  es6, react.js, webpack

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 methodsscriptTags 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-coreBasic module of babel6

  • babel-eslint ESLintIs the front-end JS code detection weapon. Andbabel-eslintYou are allowed to detect all Babel codes.

  • babel-loaderThis package allows you to translate JavaScript files using Babel and webpack.

  • babel-plugin-react-transformThis plug-in encapsulates React components by any transformation. In other words, you can play with your components as you like.

  • babel-plugin-transform-runtimeDuring 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-es2015This preset includes all es2015 plug-ins.

  • babel-preset-reactThis preset includes all React plug-ins.

  • babel-preset-stage-0This preset includes all plug-ins in stage 0.

  • eslintJavaScript syntax detection tool: analyze potential errors and nonstandard usage of your code.

  • eslint-plugin-reactPlug-in for React syntax detection in ESLint.

  • react-transform-hmrA React conversion device that makes it possible to thermally overload React classes by referencing the Hot Module Replacement API.

  • react-transform-catch-errorsPresent the error message of your React component.

  • webpack-dev-serverProvide 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-runtimeBabel’s own operating environment.

In addition, I addedstyle-loader,css-loader,less,less-loaderThese four packages are used for loading.lessFile module. (Note,less-loaderAndlessIt must exist at the same time to work properly. )

Part description of files under root directory

  • .babelrcWhat is.babelrcWhere 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. insideenvField, BABEL_ENV or NODE_ENV can be specified with different environment variables and compiled differently.

  • eslintignorenoticeeslintIgnore files that should not be detected.

  • eslintrcEslint 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.

UseReact.ComponentReplaceReact.createClass

// The ES5 way
 var Photo = React.createClass({
 handleDoubleTap: function(e) { … },
 render: function() { … },
 });
 
 // The ES6+ way
 class Photo extends React.Component {
 handleDoubleTap(e) { … }
 render() { … }
 }

UsestaticKeyword to complete attribute initialization (this is the content of es7, notestateCan 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,
 }
 }

InconstractorDefined 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-loaderWhere 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 ~

Related Posts: