React 安装
通过CDN库构建 React 环境
-
使用 Staticfile CDN 的 React CDN 库,地址如下:
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <!-- 生产环境中不建议使用 --> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
-
官方提供的CDN地址:
<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 生产环境中不建议使用 --> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
注意:如果我们需要使用 JSX,则
<script>
标签的 type 属性需要设置为 text/babel。
通过 npm 构建 React 环境
前提条件:安装Node >= 8.10 和 npm >= 5.6
设置淘宝镜像:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
执行以下命令创建项目:
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
项目的目录结构如下:
demo/
README.md
node_modules/
package.json
package-lock.json
.gitignore
public/
favicon.ico
index.html
logo192.png
logo512.png
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTest-lock.json