React+webpack搭建环境Hello World

首先需要安装node.js,官网下载

利用npm安装各种资源,打开cmd,-g全局安装

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

创建项目文件夹testReact

cd testReact

npm init -y

安装react

$ npm install react react-dom --save

安装bable

$ npm install babel-core --save
$ npm install babel-loader --save
$ npm install babel-preset-react --save
$ npm install babel-preset-es2015 --save

创建文件index.html,main.jsx,webpack.config.js

在webpack.config.js中输入

var config = { entry: './main.jsx', output: { path: 'dist文件夹的绝对路径', filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] } } module.exports = config;

现在打开 package.json 文件，找到 “scripts”中的 “test” “echo \”Error: no test specified\” && exit 1″使用以下代码替换
"start": "webpack-dev-server --hot"

在index.html中加入id为'root'的div,并引入bundle.js文件 dist/bundle.js (后面再生成这个文件)

在main.jsx中写入

import React from 'react';import ReactDOM from 'react-dom';class Hello extends React.Component {    render(){        return (            <div>Hello,world</div>        )    }}ReactDOM.render(    <Hello/>,    document.getElementById('root'))

最后在cmd输入

webpack

会生成bundle.js文件,这时候打开index.html就有hello world了

参考转载自:
作者：旧丶时候
链接：http://www.jianshu.com/p/f10babb8790d
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。