脚本宝典收集整理的这篇文章主要介绍了React学习笔记1：环境搭建，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
新搭建的个人博客，本文地址：React学习笔记1：环境搭建
1、创建学习目录
mkdir learn
cd learn2、npm初始化项目
npm inIT //根据相关提示完善信息，入口js文件：src/index.js3、安装相关react npm包，并且使用es2015（也就是es6支持，需要babel-preset-es2015包），因为我之前做个一些js相关项目，所以部分npm包已经全局安装，比如webpack等等，大家根据提示补足自己的npm包即可
npm install --save react react-dom babel-PReset-react babel-preset-es2015 babel-loader4、创建相关文件目录结构
mkdir src //存放源文件
mkdir build //存放编译后的js文件5、创建webpack配置文件（webpack好强大，之后再做详细的学习）
touch webpack.config.jsVAR path = require('path');
module.exports = {
entry:[
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015','react']
}
}]
},
devServer:{
contentBase:'./build'
}
};6、创建index.js源文件，书写经典的Hello World！
touch src/index.jsvar React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);7、利用webpack编译源文件，根目录下直接运行webpack，运行完成后会在build目录生成bundle.js文件
$ webpack
Hash: 32a8e736b4323f7ec350
Version: webpack 1.12.9
Time: 1318ms
Asset Size Chunks Chunk names
bundle.js 676 kB 0 [emitted] main
[0] multi main 28 bytes {0} [built]
+ 159 hidden modules8、创建index.htML承载体文件，引入bundle.js，方便在浏览器中运行
touch build/index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React环境搭建</title>
</head>
<body>
<div id="example"></div>
</body>
<script src="bundle.js"></script>
</html>9、浏览器直接打开index.html，出现Hello world！
10、每次修改完成，运行webpack还是很麻烦的，利用webpack-dev-server可以完成自动自动编译，自动刷新浏览器
$ webpack-dev-server
http://localhost:8080/webpack-dev-server/
webpack result is served From /
content is served from ./build
Hash: 67262048da84a36a0a5c
Version: webpack 1.12.9
Time: 1325ms
Asset Size Chunks Chunk Names
bundle.js 676 kB 0 [emitted] main
chunk {0} bundle.js (main) 643 kB [rendered]浏览器进入http://localhost:8080/webpack...输出Hello world！
webpack的配置指定了webpack-dev-server的根目录
devServer:{
contentBase:'./build'
}尝试修改src/index.js的内容，页面有自动刷新了
OK，到此完成环境的基本搭建！
以上是脚本宝典为你收集整理的React学习笔记1：环境搭建全部内容，希望文章能够帮你解决React学习笔记1：环境搭建所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。