React 安装

create-react-app

React 的环境搭建,是比较繁琐的,有很多的依赖:reactreact-dombabelwebpack ... 需要很多的前置知识,很容易让人从入门到放弃。

于是就诞生了 脚手架 这种东西,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 环境的搭建。


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 目录下的文件。

React 教程 React 安装 React 组件 React JSX React 样式 React 生命周期 React State React Props React 事件 React Refs React Router
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程