React development based on Webpack+babel

1. What is  Webpack?

Webpack performs as a plugin platform, a module bundler. It treats modules, tools and libs as plugins, which won’t be loaded unit they are really needed. These makes webpack flexible and perform well( run faster).

For example, in webpack  project, css and  babel as treated as individual modules( plugins), we can config loader for these modules in webpack config file, and webpack will help us to build js files according to its config files.

2. How to setup a Webpack+Babel+React development environment?

1). Install webpack globally

npm install webpack -g

2). Install loaders

loaders for css:  npm install css-loader style-loader  --save -dev

loaders for babel and react : npm install babel-preset-es2015 babel-preset-react babel-core babel-loader  --save -dev

3). Install  webpack development server

Webpack development server is a local http server for us to develop.

npm install webpack-dev-server -g

3. Webpack config

When using webpack , we need to create a default config file names  ‘webpack.config.js’ .

A comman config files looks like this:

2016-05-17_222130.jpg

1) entry: point to a default entry file for webpack to build the whole project. The entry file should contain the root node of the project or point to the root node. This image below is  a default entry file,  with the help of entry file, webpack will build the whole project into ‘output’ file

2016-05-17_222358.jpg

2)output:  tells webpack  which is the output file after the whole project is built. We should also import the output file( bundle.js) in index.html

3)loaders: config the babel loader for react and es2015. Any new loaders should be configured here.

3. How to develop a react project based on webpack?

As we can see, the entry file of the project should be ‘Container.js'(configured in entry.js).

2016-05-17_223100.jpg

1) As an try to the whole project, Container.js should create a new react component and insert it into default page. We can see from the codes at the bottom, the element ‘content’ is a default element in index.html, we find it and insert our own component in front of it.

2) All react component ( and react files) should create from react, but there are two kinds of declaring method. The codes shown above is the older grammar, es6 grammar should define as a class.

2016-05-17_223620.jpg

The class should extends from (react) Component, and must have a constructor function.

3) So whats the difference between the two declarations?

First of all, the lower one is recommended, because its es6 grammar.

Second, when we use the former one( React.createClass ),  we will also get a lot react functions, such as getInitState , componentDidMount and so on, which will be called at specific time. But when we use class declaration, we should init state in constructor function, and we don’t have any componentDidMount function to use. This really affect when you want to handle some asynchronous calls.

Third, react provide autobinding in former case. In es6 grammar, we need to bind this ourselves.

Fourth, when we use class, don’t forget to import React and Component from ‘react’

4. What’s more?

Never forget! this.setState() is a asynchronous function!

5. Demos

I have build a pretty nice demo on github : git@github.com:CyrusCai/-Mentoring-Program-Es6-Practice.git

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s