一个电商网站建设需要哪些技术,惠东住房建设局网站,四川采集app,wordpress站内搜索React 简介、基础入门 一、React 简介1、是什么#xff1f;2、谁开发的#xff1f;3、为什么要学#xff1f;4、React 的特点5、学习 React 之前你要掌握的 Javascript 基础知识 二、React 入门1、相关 js 库2、Hello React 入门小例子---React16.8.0 版本3、为什么不用 js … React 简介、基础入门 一、React 简介1、是什么2、谁开发的3、为什么要学4、React 的特点5、学习 React 之前你要掌握的 Javascript 基础知识 二、React 入门1、相关 js 库2、Hello React 入门小例子---React16.8.0 版本3、为什么不用 js 而需要使用 jsx3.1 使用 jsx 创建虚拟 DOM3.2 使用 js 创建虚拟 DOM3.3 通过对比发现 4、虚拟 DOM 与真实 DOM4.1 关于虚拟 DOM 5、JSX 语法规则5.1 例子5.2 语法规则5.3 JSX 小练习5.3.1 区分【js 语句代码】与【js 表达式】 5.4 模块与组件、模块化与组件化的理解5.4.1 模块5.4.2 组件5.4.3 模块化5.4.4 组件化 一、React 简介
1、是什么
用于构建用户界面的 JavaScript 库 界面–》 视图 只关注视图层 例子使用原有的知识去展示数据的步骤 1发送请求获取数据 2处理数据过滤、整理格式等 3操作 DOM 呈现页面 React 只关注这一步骤
React 是一个将数据渲染为 HTML 视图的开源 Javascript 库
2、谁开发的
由 Facebook 开发的且开源 时间线 1起初由 Facebook 的软件工程师 Jordan Walke 创建 2于 2011 年部署于 Facebook 的 newsfeed 3随后在 2012 年部署于 InstagramINS 42013 年 5 月宣布开源 … 近十年 “陈酿”React 正在被腾讯、阿里等一线大厂广泛使用
3、为什么要学
1原生 Javascript 操作 DOM 繁琐、效率低DOM-API 操作 UI
document.getElementById(app)
document.querySelector(#app)
document.getElementsByTagName(span)2使用 Javascript 直接操作 DOM 浏览器会进行大量的重绘重排 3原生 Javascript 没有组件化编码方案代码复用率低 js 的模块化将非常庞大的 js 按照功能点拆分成一个个小的 js这就要做模块化 组件化将结构和 js 都拆分成小的部分
以上是原生 JavaScript 的痛点。
4、React 的特点
1采用 组件化 模式、声明式编码提高开发效率及组件复用率。 命令式编程缺少任何一个步骤都没法得到结果 声明式编程只需要说出想要的结果过程可以省略 2在 React Native 中可以使用 React 语法进行 移动端开发。 3使用 虚拟 DOM 优秀的 Diffing 算法 尽量减少与真实 DOM 的交互
5、学习 React 之前你要掌握的 Javascript 基础知识
1判断 this 的指向 2class类 3ES6 语法规范模板字符串等 4npm 包管理器 5原型、原型链 6数组常用方法筛选最值、条件求和等 7模块化
二、React 入门
文档 https://react.docschina.org/
1、相关 js 库
1 react.js: React 核心库
jsx 在 js 的基础上增加一些语法和规范 使用 babel 来转换
2react-dom.js 提供操作 DOM 的 react 扩展库 3babel.min.js 解析 JSX 语法代码转为 JS 代码的库
2、Hello React 入门小例子—React16.8.0 版本
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv idtest/div!-- 引入 react 核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入 react-dom用于支持 react 操作DOM --scripttypetext/javascriptsrc../js/react-dom.development.js/script!-- 引入babel 用于将 jsx 转为 js --script typetext/javascript src../js/babel.min.js/script!-- 此处一定要写babel --script typetext/babel// 1、创建虚拟 DOM. 此处一定不要写引号因为不是字符串const vDom h1Hello, React/h1// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM容器)ReactDOM.render(vDom, document.getElementById(test))/script/body
/html3、为什么不用 js 而需要使用 jsx
3.1 使用 jsx 创建虚拟 DOM
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv idtest/div!-- 引入 react 核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入 react-dom用于支持 react 操作DOM --scripttypetext/javascriptsrc../js/react-dom.development.js/script!-- 引入babel 用于将 jsx 转为 js --script typetext/javascript src../js/babel.min.js/script!-- 此处一定要写babel --script typetext/babel// 1、创建虚拟 DOM. 此处一定不要写引号因为不是字符串const vDom h1Hello, React/h1// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM容器)ReactDOM.render(vDom, document.getElementById(test))/script/body
/html3.2 使用 js 创建虚拟 DOM
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv idtest/div!-- 引入 react 核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入 react-dom用于支持 react 操作DOM --scripttypetext/javascriptsrc../js/react-dom.development.js/scriptscript typetext/javascript// 1、创建虚拟 DOM React.createElement(标签名 标签属性 标签内容)const vDom React.createElement(h1, { id: title }, Hello, React)// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM容器)ReactDOM.render(vDom, document.getElementById(test))/script/body
/html3.3 通过对比发现
当标签内容都是 ‘Hello, React’ 的时候差别不大。 但是当标签 h1 需要嵌套一个 span 标签再显示 ‘Hello, React’ 的时候 js 创建就需要这么写
React.createElement(h1,{ id: title },React.createElement(span, {}, Hello, React),
)jsx 就这么写
const vDom (h1spanHello, React/span/h1
)jsx 创建虚拟 DOM 就是原生 js 写语法糖
4、虚拟 DOM 与真实 DOM
4.1 关于虚拟 DOM
1本质是 Object 类型的对象一般对象 2虚拟 DOM 比较“轻”属性比较少真实 DOM 比较“重”。因为虚拟 DOM 是 React 内部在用无需真实 DOM 上那么多的属性。 3虚拟 DOM 最终会被 React 转化为真实 DOM呈现在页面上。
5、JSX 语法规则
5.1 例子
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleJSX 语法规则/titlestyle.title {background-color: aquamarine;}/style/headbodydiv idtest/div!-- 引入 react 核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入 react-dom用于支持 react 操作DOM --scripttypetext/javascriptsrc../js/react-dom.development.js/script!-- 引入babel 用于将 jsx 转为 js --script typetext/javascript src../js/babel.min.js/script!-- 此处一定要写babel --script typetext/babellet MyId TestIn// 1、创建虚拟 DOM. 此处一定不要写引号因为不是字符串const vDom (divh1 classNametitle id{MyId.toLowerCase()}span style{{ color: red, fontSize: 120px }}Hello, React/span/h1h1 classNametitle id{MyId.toUpperCase()}span style{{ color: red, fontSize: 80px }}Hello, React/span/h1input typetext/inputGood/Good/div)// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM容器)ReactDOM.render(vDom, document.getElementById(test))/script/body
/html5.2 语法规则
1全称 Javascript XML 2react 定义的一种类似于 XML 的 JS 扩展语法JSXML a. XML 早期用于存储和传输数据
studentnameTom/nameage19/age
/student使用 json 进行存储 “{“name”: “Tom”, “age”: 19}”
3定义虚拟 DOM 时不要写引号 4标签中混入 JS 表达式时 要用花括号 {} 5样式的类名指定不要用 class需要使用 className a. class 是 es6 中的关键字react 在设计的时候避开了这个所以用 className 6内联样式要用 style{{key: value}} 的形式去写 7虚拟 DOM 必须只有一个根标签 8标签必须闭合 9标签首字母 a. 若小写字母开头则将该标签转为 html 中同名元素 若 html 中无该标签对应的同名元素则报错 b. 若大写字母开头react 就去渲染对应的组件若组件没有定义则报错
5.3 JSX 小练习
在页面上动态展示 前端 js 框架列表
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlejsx小练习/title/headbodydiv idtest/div!-- 引入 react 核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入 react-dom用于支持 react 操作DOM --scripttypetext/javascriptsrc../js/react-dom.development.js/script!-- 引入babel 用于将 jsx 转为 js --script typetext/javascript src../js/babel.min.js/script!-- 此处一定要写babel --script typetext/babel/*一定注意区分【js 语句代码】与【js表达式】1. 表达式一个表达式会产生一个值可以放在任何一个需要值的地方下面这些都是表达式:(1) a(2) ab(3) demo(1)(4) arr.map()(5) function test(){}2.js语句代码控制代码走向的下面这些都是语句代码:(1) if(){}(2) for(){}(3) switch(){case: xxx}*/let data [Angluar, React, Vue]// 1、创建虚拟 DOM.const vDom (divh1前端 js 框架列表/h1ul{data.map((el, inx) {return li key{inx}{el}/li})}/ul/div)// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM容器)ReactDOM.render(vDom, document.getElementById(test))/script/body
/html5.3.1 区分【js 语句代码】与【js 表达式】
1. 表达式一个表达式会产生一个值可以放在任何一个需要值的地方 下面这些都是表达式: (1) a (2) ab (3) demo(1) (4) arr.map() (5) function test(){}
2.js 语句代码控制代码走向的 下面这些都是语句代码: (1) if(){} (2) for(){} (3) switch(){case: xxx}
5.4 模块与组件、模块化与组件化的理解
5.4.1 模块
1理解向外提供特定功能的 js 程序一般就是一个 js 文件 2为什么要拆分成模块随着业务逻辑增加代码越来越多且复杂 3作用复用 js 简化 js 的编写提高 js 运行效率
5.4.2 组件
1理解用来实现局部功能效果的代码和资源的集合html、css、js、image 等 2为什么一个界面的功能更复杂 3作用复用编码简化项目编码、提供运行效率
5.4.3 模块化
当应用的 js 都以模块来编写这个应用就是一个模块化的应用
5.4.4 组件化
当应用是以多组件的方式实现这个应用就是一个组件化的应用
