React 的环境搭建, 是比较繁琐的, 有很多的依赖: react,react-dom,babel,webpack ... 需要很多的前置知识, 很容易让人从入门到放弃.
于是就诞生了 脚手架 这种东西, create-react-App 就是一个 React 的脚手架, 用它可以很方便的就创建了整个 React 的环境搭建, 它解决了所有的依赖问题.
1, 安装 Node.JS
安装 create-react-App 唯一的条件就是你的电脑必须有 Node.JS 环境, 因为 Node 的很大一部分应用场景就是作为前端的工具链.
2, 安装 create-react-App
- // 安装 create-react-App
- NPM install -g create-react-App
安装好了之后, 看一下版本
create-react-App --version
证明是安装成功的.
创建 React 工程
安装完成 create-react-App, 可以开始创建 React 工程
- // 创建 React 工程
- create-react-App my-App
- // 进入工程目录
- cd my-App
- // 启动 React
- NPM start
如果成功, 访问 http://localhost:3000/ 就能访问我们创建的 React 工程的主页, 这几条命令也就完成了整个 React 环境的搭建.
build
NPM start 启动的是开发环境, 但是在生产环境中, 我们需要 build.
React 的思想, 可以说是透支了浏览器的未来, 就是说它有很多新的特性, 新的功能, 但是这些功能浏览器并不支持. 所谓的 build 就是把我们在 React 中创造的应用, 翻译成最普通的, 浏览器能支持的 html,CSS,JavaScript 代码.
我们进入到 React 工程目录, 运行 NPM run build 在目录中会多出了一个 build 目录, 这里面存放的就是翻译 React 代码之后的纯静态文档. 这些内容, 是在生产环境中运行的.
如果你的电脑刚好装了 python3 我们可以模拟一下生产环境. 进入 build 目录 运行 sudo python3 -m http.server 3001, 成功之后 http://localhost:3001/ 访问的就是 build 目录下的文件.
来源: http://www.css88.com/qa/react/14483.html