如何引入React
- 使用cdn方式引入
首先进入 www.bootcdn.cn/ , 搜索 react
这里我们需要引入 react 和 react-dom 两个js文件 , react 将核心代码和对dom操作的代码分成了两个库,
所以我们需要分两次进行引入。
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.9.0/umd/react.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.9.0/umd/react-dom.development.js"></script>
通过截图可以看到,引入 react 的两个js库文件后,我们在自己的 index.js 里进行输出打印,
输出了两个对象,和两个对象中的函数,这代表我们已经成功引入了 react ,接下来可以进行使用了。
我们可以看到在 bootcdn 列表中,js文件目录分为 cjs 和 umd ,这里说下两者的区别,
cjs全称CommonJS,是Node.js支持的模块规范,
umd是统一模块定义,兼容各种模块规范(含浏览器),
理论上优先使用umd,同时支持Node.js和浏览器,
cdn的引入方式现在已经不推荐使用,最新的模块规范是使用import和export关键字。
-
通过create-react-app工具创建React项目
请首先确保您本机安装了NodeJS项目。
随后安装
yarn global add create-react-app,最后通过
create-react-app 项目名称创建一个项目 ,yarn start启动项目,即可看到创建好的react项目效果。
总结
上面介绍了两种 react 的引入使用方式,一种是cdn,一种是通过工具 create-react-app ,
在现代的开发中,更推荐的是使用 create-react-app。