HABIT IS POWSER

Hello React

需求

我在react还是0.x版本的时候,走过一遍react的Getting Started,目前虽然已经写了一些代码,但是完完整整的Hello World倒是没写过,所以决定补下这篇Hello World教程,并做一些相关知识的入门介绍。

参考内容

如果你能看得懂react官网的介绍,其实也没必要看我这篇转述的教程。

React官方 Getting Started

CDN静态文件(为什么不用Facebook的CDN大家都懂的)

Package Management

最简单的Hello World

单个静态文件,并使用CDN直接引用react.js、react-dom.js以及browser.min.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world! @eden</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

React + npm + webpack

1. 创建一个目录hello-react

之后的命令行操作都是在这个目录下进行的。

2. npm init一个package.json文件,全部使用默认即可

1
npm init

3. 配置npm依赖

这里的webpack我并没有使用全局安装,下面的步骤会用到

1
npm install --save react react-dom babel-preset-react babel-loader babel-core webpack

4. 在hello.html和hello.js中写代码

hello.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- No need for Babel! -->
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>

hello.js

1
2
3
4
5
6
7
8
// hello.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world! I'm eden</h1>,
document.getElementById('example')
);

5. 用webpack生成bundle.js

创建并配置babel:.babelrc

1
{ "presets": ["react"] }

webpack打包,使用本地目录下的webpack,而不是全局的

1
./node_modules/webpack/bin/webpack.js hello.js bundle.js --module-bind 'js=babel-loader'

这样我们就在hello-react的根目录下得到了下面这几个文件和目录:

1
2
3
4
5
6
./.babelrc
./bundle.js
./hello.html
./main.js
./node_modules
./package.json

6. OK了

直接用浏览器打开./hello.html就是我们想要的用npm和webpack打包出来的,最简单的react hello worl

webpack配置

上面我们使用了webpack的命令行进行打包,其实用npm配合webpack会更方便,同时我们也调整下我们的目录结构,把hello.js放到src目录下,并把打包生成的bundle.js,以及hello.html放到build目录下。

添加一个webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var path = require('path');
var config = {
entry: [
path.resolve(__dirname, 'src/hello.js')
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {}
}]
}
};
module.exports = config;

修改下package.json添加一个build的script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"name": "hello-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-react": "^6.5.0",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"webpack": "^1.13.0"
}
}

通过npm来执行webpack打包

1
npm run-script build

这样我们就在hello-react的根目录下得到了下面这几个文件和目录:

1
2
3
4
5
6
./.babelrc
./build/bundle.js
./build/hello.html
./package.json
./src/hello.js
./webpack.config.js

好了,可以通过打开hello.html来查看下我们的成果了

webpack 小结

再往后,你可能就需要用webpack-dev-server来自动刷新页面,这个本文就不具体介绍了,因为webpack可以做的事情非常多,大家慢慢去发现吧 :)

这里贴下在上面的步骤之后配置webpack-dev-server的方法:

1
npm install --save webpack-dev-server

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var path = require('path');
var config = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname, 'src/hello.js')
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {}
}]
}
};
module.exports = config;

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"name": "hello-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-react": "^6.5.0",
"react": "^15.0.2",
"react-dom": "^15.0.2",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}

执行脚本:

1
npm run-script dev

然后你就可以在浏览器上用http://127.0.0.1:8080/hello.html自动刷新你的修改了

关键字说明

babel

webpack

babel 6 教程