React development environment

Recently contacted react frame, small remember ~ ~ ~

Development environment Configuration

To build a modern front-end development environment supporting a lot of tools, such as Grunt/gulp/webpack/broccoli, are to solve the front-end engineering problems, this topic is very large, here in order to use React we only focus on two of these points:

• JSX Support
• ES6 Support

It is very convenient to cooperate with Webpack.

Webpack Configuring the React development environment

Webpack is a front-end resource loading/packaging tool that provides the functionality needed for front-end engineering in a relatively simple configuration, and can be integrated into other workflows such as Grunt/gulp if needed.

NPM (Node Package Manager) is the Nodejs's best-in-the-World Pack Manager and is now installed on your device with the NODEJS official package. As long as the project is written Package.json placed in the project root directory, at the time of redeployment only need to execute a npm install simple line of command, all related dependencies can be automatically installed under the project directory, and also very convenient to different projects of different dependent package version of good, unified management.

NPM is used primarily for the internal dependency management of node. JS projects, and the installed modules are located within the Node_modules folder in the project root directory. While Bower is used for front-end development in most cases, dependency management on content such as css/js/templates can be customized for the dependent download directory structure.

The specific use of NPM has no need to repeat, you can refer to http://www.cnblogs.com/reese-blogs/p/5336460.html

Installing Bower
npm install -g bowerYou can then use bower install NPM-like methods to manage the front-end dependencies for the current project. It's as quick and easy as NPM.

Example: Bower Install Chartjs installation Chart.js

Install Webpack:npm install -g webpack

Webpack use a webpack.config.js configuration file named, to compile the JSX, first install the corresponding loader:npm install babel-loader --save-dev

Start a project with NPM start, package with NPM run build

Suppose we have a portal file in the current project directory, the entry.js React component is placed in a components/ directory, the component is entry.js referenced, to use entry.js , we specify the output to this file dist/bundle.js , the Webpack configuration is as follows:

var path = require(‘path‘);module.exports = {    entry: ‘./entry.js‘, output: { path: path.join(__dirname, ‘/dist‘), filename: ‘bundle.js‘ }, resolve: { extensions: [‘‘, ‘.js‘, ‘.jsx‘] }, module: { loaders: [ { test: /\.js|jsx$/, loaders: [‘babel‘] } ] }}

resolveSpecifies import the file suffix that can be used. For example Hello.jsx , a file like this can be import Hello from ‘Hello‘ referenced directly.

loadersSpecify the Babel-loader compiler suffix name .js or .jsx file so that you can freely use JSX and ES6 in both types of files.

Monitor compilation:webpack -d --watch

More about Webpack

• Webpack-howto

React development environment