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:
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
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).
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.
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!
I have build a pretty nice demo on github : firstname.lastname@example.org:CyrusCai/-Mentoring-Program-Es6-Practice.git