React是一套用于构建用户界面的JavaScript框架,它也是现今最流行的前端框架之一。React来自Facebook公司,最初用于开发Instagram,后被Facebook开源。React的同类产品有Angular,Vue等,这两个框架在其他章节中已经介绍过了。本系列笔记将详细介绍最新版本的React用法及其周边生态。
项目主页:https://react.dev/
注:React新版本相对于旧版本在组件定义、API等方面均有较大变动,本系列笔记以当前最新的React18版本进行介绍,并删除了过时的内容。
个人认为React框架最大的优点是学习起来比较简单,基本只要熟悉JavaScript(指ES6新标准)就可以上手了,像JSX等基本没什么学习曲线,Redux则需要稍微花点时间理解,但它有一定的适用场景,对大对数项目来说可能并不是必须的。React的缺点是写起来比较复杂,这是因为JavaScript是一种多范式混杂的语言,各种库的写法可能让代码绕来绕去,尤其是多人合作时,一旦开发人员水平参差不齐或者风格互不相同,就可能造成一场灾难(代码失控)。
至于Vue,如果很熟悉它,那么写起来是非常简单快速的,但这个熟悉需要较多的学习成本和开发经验。Vue封装的比较深,表面上一些写法虽然简单易用,但乍一看有些不明所以。一旦遇到问题,猜也猜不出,文档又语焉不详,那就是所谓的“掉坑里了”。
总而言之,我认为React比较适合大家前端水平都不错的团队,也适合后端人员临时凑两个人写前端的情况。
手动搭建一个React工程涉及众多组件的选取和配置,这通常要参考大量细枝末节的技术文档,是一件很复杂的工作。在学习阶段创建React工程最简单的方式是使用CRA(Create React App)脚手架,它能够快速搭建基于WebPack构建的React工程。
CRA项目主页:https://create-react-app.dev/
我们可以执行以下命令,使用CRA脚手架一键创建React工程:
npx create-react-app demo-react
默认创建的工程代码结构如下。
demo-react
|_README.md
|_node_modules
|_package.json
|_public
|_index.html
|_favicon.ico
|_src
|_App.css
|_App.js
|_App.test.js
|_index.css
|_index.js
|_logo.svg
其中public/index.html
是浏览器打开的入口HTML文件,src/index.js
是WebPack打包的入口源代码文件,这两个文件的文件名是固定的不可以更改,其它源码文件和资源文件都是被这两个入口文件间接引用的。工程中我们可以看到没有WebPack配置文件,这是因为CRA是个封装层次很深的框架,它默认隐藏了很多复杂配置,我们可以通过环境变量或是添加一个.env
文件改变默认配置,这些高级用法具体可以参考CRA文档。
CRA底层使用WebPack进行打包,在命令行中运行npm start
即可启动devServer,供我们在开发阶段进行预览和调试。
在学习阶段,我们可以使用CRA搭建一个这样的工程,并尝试修改工程中的代码来查看对应效果。不过在实际项目开发中CRA使用不多,这主要是因为CRA封装较深,很多配置默认没有暴露,实际项目中情况可能非常复杂,CRA脚手架使用起来不太灵活。实际开发中,我们一般都是手动搭建工程,或是使用UmiJS等功能比较全面的脚手架工具。有关如何手动搭建React工程我们将在后文进行介绍。
实际上除了使用CRA脚手架和我们纯手动搭建React工程,还有几种比较流行的使用React的方式。
UmiJS:UmiJS是国内阿里开源的一款基于React的前端框架,它是一个“全家桶”式的企业级框架,集成了我们实际后台项目开发中可能用到的方方面面的组件,比如组件库、预处理样式、路由、数据流、WebPack、SSR等,并提供了统一的接口给我们使用,简化了大型前端工程的搭建,主要应用于后台管理系统。
NextJS:NextJS是Vercel开源的一个全栈框架,它基于React构建界面并集成了许多组件的最佳实践,以SSR(服务端渲染)、SSG(静态页面生成)应用为主,主要用于对外的门户网站前台。
有关这些框架将在其他章节介绍。