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