Creating react webpack project through yeoman

Explanation

Create react project through yo, and learn react and redux


Environmental requirements

The environment requires node JS environment. Please install the latest node JS version

After opening CMD (under win) or terminal (MAC & amp; Linux) to execute NPM – V, you can see the version number displayed. all subsequent execution refers to the execution of on the command line or terminal

To install yeoman, bower, grunt and gulp, you may need to install sudo on Mac. Execute the following command NPM install – G yo bower grunt cli

Installation and use of yeoman


Build a project

execute yo

select install a generator

search for the keyword react. Wait a moment (according to the network environment) and some lists will appear. Choose to install react webpack

Exit yo, create a directory, MKDIR reacttest, and enter CD reacttest

execute Yo and select react webpack. You can name the project or use the default

select the CSS language, which is the default

whether to open postcss, select y or n according to the demand

and then wait for the project to be built automatically. At this time, the relevant dependency library will be downloaded from the network, and the network environment will affect the time

when you see the pattern below, it is finished. If there is an error, you can delete the node_ Modules folder, and then execute NPM install to re download the dependency


Running projects

NPM run start to run the project

Open package.json , you can see the scripts under the command can run, the function is shown in the name


ES6 learning

In react and Redux’s dome code, there will be syntax related to ES6, which can be learned together in the learning process


React learning

1. It is suggested to study the official course directly

React official
Chinese react

2. It’s better to follow the examples in the tutorial, and don’t copy and paste them. Some examples can’t run through Chinese, and the official can


Redux learning

1. It is suggested to study the official course directly

Redux official
Redux Chinese

2. It’s better to follow the examples in the tutorial, and don’t copy and paste them. Some examples can’t run through Chinese, and the official can

Similar Posts: