Learn react starting from 0 (b)

Today, start learning the second verse!!!

工欲善其事, its prerequisite

React recommended we use Webpack to package files, then we use it! (actually really don't want to use AH)

As for the advantages of the online writing of the hype, we solve ah ...

This section is mainly to learn how to configure Webpack, this thing I made a full day to get smattering, hey, poor brain is a disadvantage ...

1. Preparing for work in advance

(PS: Install node yourself, don't blame me for not reminding you)

First of all, you need to have a folder of your own, as for what name you look at, my call Reactdemo

Put a test in the HTML plus a JS folder

2. Installation

2.1

Click Win+r, enter cmd into the console, and enter your own directory

Enter NPM Init

It's all right.

and go into your folder to see if there's a Package.json file.

　　2.2

OK, now let's start with the global installation.

Continue entering NPM install-g Webpack

Then wait silently ...

2.3

Now you can configure the Webpack, this to be under more things, the network is not good people mourn it (I spent 2 hours--!) ）

Style-loader Loader

Enter NPM install Style-loader--save-dev

(The loader section is not there ah, because just installed, in the loading of a time too wasted, sorry Ah, forgive my lazy it)

Css-loader Loader

Enter NPM install Css-loader--save-dev

Jsx-loader Loader

Enter NPM install Jsx-loader--save-dev

After the local installation Webpack

Enter NPM install Webpack--save-dev

After success your folder becomes this kind of paper:

3. Use

Before this use, but also to create a webpack.config.js file, this file, is to tell Webpack what you want to do, here is a demo, so it is easy to write a simple point (more I still do not understand it, huh!) ）

Finally to be able to use the time, think of the heart or a little excited about it!

When to be, to succeed ...

This time your folder becomes this kind of paper:

Webpack automatically helped us build the build folder, there is a build.js ...

However, I do not have to introduce index.js in the HTML, the direct introduction of build.js can be ...

That's basically all about it.

In addition, I also met in the use of the appearance is not internal command (as if to call this, we understand the good) This error, the solution is also posted here

This is generally the case because of environmental variables.

We enter by pressing Win+pause

Select the one I drew and click this:

After entering:

Click Edit or double-click to add the path.

This time the smart baby will ask where the path is? Gross, negligence, this you may have to read the path from above to come again.

Path:

Then enter:

Find Webpack.cmd:

Anyway mine is here, others are not I really do not know.

Copy this:

OK, this is the path, add to the environment variables mentioned above, OK!!!

The end of the famous saying: There is no perfect article, as there is no outright despair.

(The previous chapter was despised by GM, said not technical articles, not let the home page, indeed I am very vegetables, but do not have to do so!!! Moon I also, moon I also, moon I also ... ）

Reference: Webpack official website http://webpack.github.io/

30 minutes to teach you to learn Webpack combat http://www.th7.cn/web/html-css/201509/120709.shtml (this big capitalization is really good, at least not foggy, like my IQ can understand)

Learn react starting from 0 (b)