Teach you how to use Webpack+react

The previous essay on the introduction of beginners in the front end mentioned in the fourth phase to keep up with the current front-end development needs a framework and automation tools, it was recommended that webpack+react today just have time, also put their own entry Webpack + react the arduous process of writing down, It's a tear to think of now. The process is not table, now I see some of the tutorials to summarize, pick out the more friendly to the novice learning process.

The first step:

Webpack and react are to be used in conjunction with node. js. Go to node. JS official website to download the current node, the official website will be based on your environment to match your appropriate version, directly download the installation is good. Node's use with the console, if you are a Linux or iOS system is very convenient, here is a description of my use of Windows system.

1.1 Git-bash Windows Console is not very good, I have been using the GIT console, but very inconvenient, in general, foreign programmers mostly use Linux (free) so the front-end world for WinDOS development has been supported by the less friendly. Describes several common commands under Git (Linux generic):

CD: Jump to a directory, such as a CD. /Just jump to the previous directory,

mkdir: Generate directory in current directory,

LS: Querying files in the current directory

RM: Deleting files

TAB: Auto-completion path, for example, you have a test directory in the previous directory, you want to switch to this directory can write CD. /T then press the TAB key to automatically get it.

1.2 VPN Because some do not know the reason, I use the process to download the dependency package when often error occurred, later asked the high talent to understand, many times download the dependency package error is because some sites can not access, need to take a ladder. Now, I usually drive a VPN when I download a dependency package. If you do not want to toss, you can directly buy a toll VPN, I use the Green Network Accelerator, this accelerator general, belongs to the situation can be used, if who has a better solution can be a private messages to me.

Step Two:

Complete the above content, the basic environment has been set up, learning to use react before, should use Webpack, here recommend a simple and easy to learn tutorial:

Webpack Chinese Guide

This tutorial is very simple, are introduced webpack inside very basic concept, after reading this tutorial you should understand Webpack loader, configuration file How to write, Webpack is how to manage the project, how the plug-in is applied, a basic project framework is what it looks like, Web-dev-server unloading is going on.

Then take a look at the following tutorial, followed by the teaching material step by step:

Webpack Fool Guide

Step Three:

The second step of the introduction of the content although very simple, but the basic concepts are clear, this time can be used in conjunction with react. This aspect of the tutorial recommended Nanyi Teacher's introductory tutorial, the individual has not seen better than he wrote the introductory tutorial:

React Introductory Example Tutorial
This tutorial is a separate react, and we learn his ideas, but when building the project it was introduced to Webpack together. Here's how to implement the first demo in one step:

3.1. In the root directory, right click on the space to choose Git BASH (already installed git local client), pop up the git console. Create a demo directory, CD to this directory

　　　　　　　　　　　　

3.2. NPM Init creates a project, enters relevant information, and the system automatically generates Package.json

3.3. Create the following directory structure: (where build system is built automatically)

　　　　　　　　　　

3.4. Add Dependent Packages:

NPM install Css-loader jsx-loader react react-dom--save-dev

(If there is an error in the installation, you can install one, fix the bug)

3.5. Write config file webpack.config.js:

3.6 Write the entry file Index.js:

　　　　　　　　

3.8 Write demo01.html:

　　　　　　　　

3.7 After the configuration is complete, the console executes the Webpack:

　　　　　　　　

3.8 See Hello Word on the browser.

Nanyi's 10 demos need to be written over. My demo implementation, (only implementation part) can be used as a reference:

React + Webpack (remember to give a star after reading)

Ruan a peak teaching materials inside the 10 demo are written once, you have a basic understanding of react, the next details should be explored. Here are two of the better textbooks (the ability to read the English official website directly on the good):

React Chinese Community

Webpack Introduction

　　　　　　

At this point, for the basic webpack use you have mastered, and then do more projects, more practice is good. This version is updated July 16, due to the rapid development of the front-end, there may be incompatibilities, or some concepts behind, a lot to forgive.

Above, Qi.

　　　　　　　　　　

　　　　　　　　

Teach you how to use Webpack+react