React 的环境搭建,是比较繁琐的,有很多的依赖:react
、react-dom
、babel
、webpack
... 需要很多的前置知识,很容易让人从入门到放弃。
于是就诞生了 脚手架
这种东西,create-react-app
就是一个 React 的脚手架,用它可以很方便的就创建了整个 React 的环境搭建,它解决了所有的依赖问题。
越上层的建筑,越方便的工具,也说明了我们对底层的定制性越差。不过对于新手学习的同学,把应用的东西先做起来之后,有必要再去理解底层环境的东西,也是种不错的学习的路径。
安装 create-react-app
唯一的条件就是你的电脑必须有 Node.js
环境,因为 Node 的很大一部分应用场景就是作为前端的工具链。
// 安装 create-react-app
npm install -g create-react-app
// 创建 React 工程
create-react-app my-app
// 进入工程目录
cd my-app
// 启动 React
npm start
如果成功,访问 http://localhost:3000/
就能访问我们创建的 React 工程的主页,这几条命令也就完成了整个 React 环境的搭建。
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 目录下的文件。