Learn react starting from 0 (b)

Source: Internet
Author: User

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


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.


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

Continue entering NPM install-g Webpack

Then wait silently ...


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.


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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.