React的基本入门 | 青训营笔记

155 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的的第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~