近年来各大前端框架流行,基本上已经变成了React,Vue和Angular“三足鼎立”的状况。其中React依赖于完整的生态环境,Facebook巨大影响力以及国内BAT等各大公司的纷纷推崇,不得不承认React已经成为最火的前端框架了(当然现在Vue作为后起之秀也是很厉害的,这里大家就不要纠结了,仅仅代表个人观点)。
开发React你的几种选择:
- 使用一些在线编辑的网站,在线快速学习,如
CodePen
,jsfiddle
等
优点:快速便捷不需要过多配置
缺点:这种方式也就是让你尝个鲜,写一写demo用的
code snippet
- 使用webpack从零开始编写webpack配置文件,根据项目需要配置各种loader,plugin以及对于生产环境的一些优化
优点:好吧其实除了学习webpack到底做了什么,好像都是缺点。。。
缺点:配置复杂(Webpack的配置开一节课来讲应该都没有问题),官网文档写的不接地气
- 使用React官方提供的的脚手架
Create-React-App
(后面简称CRA)
优点:傻瓜式,典型的
out-of-the-box
,你不用太关心到底做了什么(不过有些定制化还是要自己搞得,后面的文章再说)
缺点:满足不了你的好奇心,
eject
之后来查看好像代码有点多
综上所述,如果你是React新手,那么直接推荐你用第三种方式,这也是这篇文章接下来要讲的。
如何使用Create-React-App
首先我们需要保证电脑上面拥有NodeJS环境,安装过npm包管理,如果不清楚怎么弄,Google或者Baidu一下有很多教程这里就不多说了
- 全局安装create-react-app 命令行工具
npm install -g create-react-app
复制代码
- 创建项目
create-react-app my-app
复制代码
耐心等待之后(国内可能网速不好,可以FQ或者使用淘宝镜像源,推荐使用nrm命令快速切换各种镜像源),就会看到我们新创建的目录,展开目录大概结构如下:
├── README.md---------------------------介绍文档
├── node_modules------------------------第三方安装包
├── package.json------------------------npm项目配置
├── .gitignore--------------------------git配置
├── public------------------------------公共资源
│ └── favicon.ico
│ └── index.html----------------------首页html
│ └── manifest.json
└── src---------------------------------源码目录
└── App.css
└── App.js
└── App.test.js
└── index.css
└── index.js------------------------入口js文件
└── logo.svg
└── registerServiceWorker.js
复制代码
- 启动项目
cd my-app
npm start 或者 yarn start (个人比较推荐后者比较快)
复制代码
Here we go! 打开浏览器,输入 http://localhost:3000
就能看到我们的第一个React应用了,这里CRA
帮我们在后台启动了一个测试服务器来实现页面的预览以及热更新,修改对应的文件就会更新到浏览器上。对于开发真正的项目这还远远不够,后面文章会讲如何加入Hot-Module-Replacement
更加高效的来完成开发工作。
CRA帮我们做了什么呢?
就像官方定义的那样Create React apps with no build configuration.
。create-react-app帮我们省去了很多环境的配置,提供了一个开箱即用的工具,假设我们自己要配置React开发环境大概需要做以下几步:
- 安装webpack(用于打包应用),webpack-dev-server(一个开发服务器来预览应用)
- 创建webpack配置文件,一般分为开发配置和生产配置两个文件
- webpack配置文件指定了应用的入口文件,各种文件的处理loader(babel, css-loader,style-loader,less-loader,sass-loader, url-loader, file-loader等等)和各种插件(htmlwebpackplugin, uglifyjsplugin等等)的配置,这些配置根据个人用到的东西因人而异。
- 等等(只能用等等呢个来描述了,有很多种需求)...
更多学习链接: Create-React-App Github主页