将react功能添加到已有的项目中去,不必担心要重构你的项目。
你只需要按以下步骤:
- 如果你的项目中没有package.json文件则在项目根目录敲:
npm init
,初始化一个配置文件,如果有则跳过这一步 npm install -p react react-dom
先安装一个全局的react和react-dom(这步可做可不做),然后,进入项目根目录安装npm install --save react react-dom
这会将react和react-dom相关信息写到package.json配置文件中- 官方推荐使用babel来兼容es6和jsx语法。安装babel-preset-react和babel-preset-es2015,命令分别是:
npm install --save-dev babel-cli babel-preset-react 和 npm install --save-dev babel-cli babel-preset-es2015
- 在项目根目录配置.babelrc 文件,使项目能自动将es6或者jsx文件转换成js。进入项目根目录,创建.babelrc 文件:
echo "a" > .babelrc
- 配置.babelrc 文件:
{
"presets": ["react","es2015"]
}
如果出现一下错误:
则表示presets引入的内容缺少或者不对。
- 使用IDE配置filewatch,目的,检测文件的修改并自动转换react文件成普通js文件。配置方法见下面2图:
- 配置结束后,只要检测到js文件,就会自动转换js文件。
- 此时我们直接引用转换后的js文件:
<script src="index-compiled.js"></script>
,访问浏览器的时候,报错:,此时百思不得骑姐姐。。。看到下面一篇博客里面的一句话,豁然开朗:http://blog.csdn.net/github_26672553/article/details/52089523
里面有这样一句话:**babel把引用部分编译成了require,而require在我们当前的es5中不能运行的。
这时我们就要安装一个新工具webpack(最火的一款模块加载器简打包工具,它能把各种资源,例如js含”JSX”、coffee、样式含”less/sass”、图片等)** - 接着又准备使用webpack打包工具。。。。。。请看第二篇。。。。。。