React笔记之入门-如何引入React(1)

1,494 阅读1分钟

如何引入React

  1. 使用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关键字。

  1. 通过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。

下一节:juejin.cn/post/686698…