React概述
react介绍
用于构建用户界面的javascript库,
https://reactjs.org/(英文)
https://react.docschina.org/(中文)
- React 是一个用于构建用户界面(UI,简单理解为:HTML 页面)的 JavaScript 库
- 如果从mvc的角度来看,React仅仅是视图层(V)的解决方案。也就是只负责视图的渲染,并非提供了完整了M和C的功能
- react/react-dom/react-router/redux: 框架
- React 起源于 Facebook 内部项目(News Feed,2011),后又用来架设 Instagram 的网站(2012),并于 2013 年 5 月开源react介绍
- React 是最流行的前端开发框架之一,其他:Vue、Angular 等等框架对比
- 与vue区别:我的理解是vue提供了更多的组件及功能封装,React更加趋于底层,对js功底要求较高
react特点
1.声明式UI
你只需要描述UI(HTML)看起来是什么样的,就跟写HTML一样
const aa = <div className="app">
<h1>Hello React! 动态数据变化:{count}</h1>
</div>
声明式对应的是命令式,声明式关注的是 what,命令式关注的是how
2.组件化
-
组件是react中最重要的内容
-
组件用于表示页面中的部分内容
-
组合、复用多个组件,就可以实现完整的页面功能
(react中万物皆组件)
3.学习一次,随处使用
- 使用 react/rect-dom 可以开发Web应用
- 使用 react/react-native 可以开发移动端原生应用(react-native) RN 安卓 和 ios应用 flutter
- 使用 react 可以开发 VR(虚拟现实)应用(react360)
React 脚手架(CLI)
-
React 脚手架的介绍
-
使用 React 脚手架创建项目
-
项目目录结构调整
-
npm i -g @vue/cli React 脚手架(CLI)
- React 脚手架的介绍
- 使用 React 脚手架创建项目
- 项目目录结构调整
- npm i -g @vue/cli (vue) => npm i -g create-react-app(react)
- vue create xxx (vue) => create-react-app xxx(react)
React 脚手架的介绍
- 脚手架:为了保证各施工过程顺利进行而搭设的工作平台
- 对于前端项目开发来说,脚手架是为了保证前端项目开发过程顺利进行而搭设的开发平台
- 脚手架的意义:
- 现代的前端开发日趋成熟,需要依赖于各种工具,比如,webpack、babel、eslint、sass/less/postcss等
- 工具配置繁琐、重复,各项目之间的配置大同小异
- 开发阶段、项目发布,配置不同
- 项目开始前,帮你搭好架子,省去繁琐的 webpack 配置
- 项目开发时,热更新、格式化代码、git 提交时自动校验代码格式等
- 项目发布时,一键自动打包,包括:代码压缩、优化、按需加载等
使用 React 脚手架创建项目
- 命令:
npx create-react-app react-basic
- npx create-react-app 是固定命令,
create-react-app
是 React 脚手架的名称 - react-basic 表示项目名称,可以修改
- npx create-react-app 是固定命令,
- 启动项目:
yarn start
ornpm run start
npx
是 npm v5.2 版本新添加的命令,用来简化 npm 中工具包的使用- 原始:1 全局安装
npm i -g create-react-app
2 在通过脚手架的命令来创建 React 项目 - 现在:npx 调用最新的 create-react-app 直接创建 React 项目
- 原始:1 全局安装
项目目录结构说明和调整
- 说明:
src
目录是我们写代码进行项目开发的目录- 查看
package.json
两个核心库:react
、react-dom
(脚手架已经帮我们安装好,我们直接用即可)
- 调整:
- 删除 src 目录下的所有文件
- 创建 index.js 文件作为项目的入口文件,在这个文件中写 React 代码即可
React 的基本使用
基本步骤
- 使用步骤
- 导入react和react-dom - 创建react元素(虚拟DOM) - 渲染react元素到页面中
- 导入react和react-dom
// 导入react和react-dom import React from 'react' import ReactDOM from 'react-dom'
- 创建react元素
// 创建元素 const title = React.createElement('h1', null, 'hello react')
- 渲染react元素到页面
// 渲染react元素 ReactDOM.render(title, document.getElementById('root'))
完整
import React from "react"; import ReactDom from "react-dom" // 创建 虚拟DOM // React.createElement('标签名',{标签属性:class建议写成className},标签内容) const vNode= React.createElement('div',{ id:'aa'},'盒子') //渲染到页面中 // ReactDom.render(元素,挂载对象) ReactDom.render(vNode,document.getElementById("root"))
JSX的基本使用
createElement的问题
- 繁琐不简洁
- 不直观,无法一眼看出所描述的结构
- 不优雅,开发体验不好
JSX
JSX
是JavaScript XML
的简写,表示了在Javascript代码中写XML(HTML)格式的代码
优势:声明式语法更加直观,与HTML结构相同,降低学习成本,提高开发效率。
JSX是react的核心内容
注意:JSX 不是标准的 JS 语法,是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包,用来解析该语法。
使用步骤
- 导入react和reactDOM包
- 使用jsx语法创建react元素
- 把react元素渲染到页面中
- 导入react和reactDOM
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
- 创建react元素
// 创建元素
const title = <h1 title="哈哈"></h1>
- 渲染元素
// 渲染元素
ReactDOM.render(title, document.getElementById('root'))
JSX 注意点
-
只有在脚手架中才能使用 jsx 语法
- 因为JSX需要经过 babel 的编译处理,才能在浏览器中使用。脚手架中已经默认有了这个配置。
-
JSX必须要有一个根节点,
<></>
<React.Fragment></React.Fragment>
-
没有子节点的元素可以使用
/>
结束 -
JSX中语法更接近与 JavaScript
class
=====>className
for
========>htmlFor
-
JSX可以换行,如果JSX有多行,推荐使用
()
包裹JSX,防止自动插入分号的bug
使用 prettier 插件格式化react代码
- 安装插件
- 添加 prettier 的配置
// 保存到额时候用使用prettier进行格式化
"editor.formatOnSave": true,
// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,
// 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",