添加react到已存在的项目中(Adding React to an Existing Application)-1

来源：互联网发布：golang mgo 连接池编辑：程序博客网时间：2024/05/04 12:58

将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打包工具。。。。。。请看第二篇。。。。。。

0 0