React安装:创建react应用
(本文根据react官网翻译,并加入了部分个人想法,如有遗漏请联系作者)
使用React工具链的好处
- 扩展文件和组件的范围
- 使用npm集成第三方库
- 自动检测语法错误
- 实时编写CSS和Javascript
- 优化生成输出
提示:本章所推荐的工具链不需要特定的配置
提示:你可能不需要工具链
如果你没有遇到之前讲述的问题或者觉得使用JavaScript工具十分方便,那么你可以把react作为纯粹的脚本script添加到html中,同时也可以根据需求选择是否使用JSX。
这也是将react集成到现有项目的最简单的方式,当然如果你觉得工具链对你更有帮助的话你也可以使用它。
推荐的工具链
React开发团队推荐以下几种工具链
- 如果你想学习react或者开发一个单页面应用的话,查看 Create React App
- 如果你想用Node.js构建服务器端渲染的网站,请查看Next.js
- 如果你想构建面向内容的静态网站,请查看Gatsby
- 如果你想创建一个组件库或继承一个已有的代码库,请查看More Flexible Toolchains
Create React App
Create React App
对于学习React来说是一个非常友好的环境,同时这也是使用React创建单页面应用最好的方式。
它帮你搭建了开发环境因此你可以在此环境下使用最新的JavaScript特性,同时它提供了一个良好的开发环境并且会对你的生产输出进行优化。
创建一个React应用,你需要在电脑上安装Node(>=8.10版)和npm(>=5.6版)。使用以下命令即可创建一个React应用
npx create-react-app my-app
cd my-app
npm start
提示:npx不是错字,他是npm5.2+自带的package运行工具
Create React App不需要操作后端逻辑或者数据库,它只是创建前端的流水线,所以你可以使用任何你想使用后端框架。尽管它在内部使用Babel和webpack,但是你完全可以不对他们做任何的了解。
当你准备部署你的项目时,在终端运行
npm run build
这段命令将会在build文件夹中生成应用的优化版本。你可以从README和User Guide中了解到更多关于Create React App的内容。
Next.js
Next.js
是一个流行的轻量级框架,用于配合React创建的静态服务端渲染应用。它包含了立即可用的样式和路由解决方案,并且假设你使用Node.js作为服务器环境。
从官网了解更多Next.js。
Gatsby
Gatsby
是使用React创建静态网页的最好的方法。它能让你在使用React组件的同时输出预渲染的html以及CSS以确保最快的加载速度。
更灵活的工具链
以下的工具链提供了更多的选择性。我们推荐富有经验的开发者使用它们。
Neutrino
把webpack的强大功能和简单的预设结合在一起,包括了对React app和React 组件的预设。
nwb
特别适于将React组件发布到npm上,同样的,它也可用于创建React 应用。
Parcel
是一个快速、零配置的web应用打包器,并且可以搭配React一起工作。
Razzle
是一个不需要任何配置的服务器渲染框架,而且相比于Next.js,它有着更高的自由度。
从零开始打造工具链
一个JavaScript构建工具链一般由以下几部分组成:
●一个包管理器,就像是yarn
和npm
。它能够让你利用庞大的第三方package生态系统,并且轻松地安装和更新它们。
●一个打包器,就像是webpack
和Parcel
。它能把你写好的模块化代码打包进一个小的package,并以此来优化加载时间。
●一个编译器,就像是Babel
。它能让你编写的现代JavaScript代码运行在较老的浏览器上。
如果你喜欢从零开始设置你的JavaScript工具链,查看这个指导,它重选创建了一些Create React App功能。
请确认你设置的工具链对生产环境进行了正确的配置。