这是我参与「第四届青训营」笔记创作活动的的第11天
React是一个用于构建用户界面的库 并不是一个框架 不局限于Web开发 虽然大部分是Web开发
React同样可以做移动应用的开发
为了轻量的渐进式框架
- 主体核心的部分都在react/react-dom两个框架中
- 如果想使用路由,我们需要安装react-router
- 如果想使用redux进行状态统一管理,我们再安装redux/react-redux
- 如果想实现其它的功能,我们还可以继续安装 中间件/axious等 ...
- 根据用户所需,再安装不同的配套组件来完成,这就是"渐进式"设计思想(vue也是这样设计的)
React 中的许多模式都使用了现代 JavaScript 的功能。React 与 JavaScript 的最大区别在于 [JSX] 语法的使用上 但是...JSX并不能被浏览器直接解析
所以es6之类的还要等待解析
然而 Webpack出现了!!! 自动部署!!! 但是 比较繁琐()
然后 就出现了 脚手架
- generator-z-react-cli
- create-react-app
- etc... 我们这里先试试FB官方的create-react-app
npm install -g create-react-app
先npm部署
create-react-app xxx
#xxx是项目名称 自己指定
创建项目
cd到那个目录
npm run start
#启动Project
然后根据目录一步一步写就行了
但是 这时候我们就会发现只安装了react中最常用的react/react-dom组件,其余的并没有安装,所以在项目开发中,我们根据需要,可能还会安装:$ yarn add redux react-redux react-router-dom prop-types等等
然后 还会发现 webpack的配置文件被隐藏了
我们先装好yarn
npm install --global yarn
然后 执行
$yarn eject
即可把webpack配置显示出来(不可逆)
然后 我们就可以扩充webpack啦
- 脚手架选择(Facebook官方的create-react-app)
- Webpack显示(yarn安装)
- 按照目录敲code Bye~