苏宁易购网站建设 的定位,制作app页面的软件,虚拟主机建wordpress,wordpress文章列表调用描述目录#xff1a; 第1章 React简介
React的基本使用:虚拟DOM的两种创建方式#xff1a; 使用jsx创建虚拟DOM使用js创建虚拟DOM(一般不用)虚拟DOM与真实DOM:React JSX:JSX练习#xff1a;模块与组件、模块化与组件化的理解 模块组件模块化组件化 第1章 React简介
中文官网: …目录 第1章 React简介
React的基本使用:虚拟DOM的两种创建方式 使用jsx创建虚拟DOM使用js创建虚拟DOM(一般不用)虚拟DOM与真实DOM:React JSX:JSX练习模块与组件、模块化与组件化的理解 模块组件模块化组件化 第1章 React简介
中文官网: https://react.docschina.org/
React的基本使用:
代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--准备好一个“容器”--
div idtest/div!--引入react核心库--
script typetext/javascript src../js/react.development.js/script
!--引入react-dom用于支持react操作DOM --
script typetext/javascript src../js/react-dom.development.js/script
!--引入babel用于将jsx转为js --
script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel//1.创建虚拟DOMconst VDOM h1Hello,React/h1//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))
/script
/body
/html
运行结果 虚拟DOM的两种创建方式
使用jsx创建虚拟DOM
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--准备好一个“容器”--
div idtest/div!--引入react核心库--
script typetext/javascript src../js/react.development.js/script
!--引入react-dom用于支持react操作DOM --
script typetext/javascript src../js/react-dom.development.js/script
!--引入babel用于将jsx转为js --
script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel//1.创建虚拟DOM// const VDOM h1 idtitleHello,React/h1const VDOM h1 idtitlespanHello,React/span/h1//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))
/script
/body
/html 使用js创建虚拟DOM(一般不用)
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--准备好一个“容器”--
div idtest/div!--引入react核心库--
script typetext/javascript src../js/react.development.js/script
!--引入react-dom用于支持react操作DOM --
script typetext/javascript src../js/react-dom.development.js/scriptscript typetext/javascript//1.创建虚拟DOM// const VDOM React.createElement(h1, {id: title}, Hello,React)const VDOM React.createElement(h1, {id: title}, React.createElement(span, {}, Hello,React))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))
/script
/body
/html
虚拟DOM与真实DOM:
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--准备好一个“容器”--
div idtest/div
div iddemo/div!--引入react核心库--
script typetext/javascript src../js/react.development.js/script
!--引入react-dom用于支持react操作DOM --
script typetext/javascript src../js/react-dom.development.js/script
!--引入babel用于将jsx转为js --
script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel//1.创建虚拟DOMconst VDOM (h1 idtitlespanHello,React/span/h1)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))const TDOM document.getElementById(demo)console.log(虚拟DOM, VDOM)console.log(真实DOM, TDOM)debugger// console.log(typeof VDOM)// console.log(VDOM instanceof Object)
/script
/body
/html
React JSX:
全称: JavaScript XMLreact定义的一种类似于XML的JS扩展语法: JS XML本质是React.createElement(component, props, ...children)方法的语法糖作用: 用来简化创建虚拟DOM 写法var ele h1Hello JSX!/h1注意1它不是字符串, 也不是HTML/XML标签注意2它最终产生的就是一个JS对象标签名任意: HTML标签或其它标签标签属性任意: HTML标签属性或其它基本语法规则 遇到 开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析遇到以 { 开头的代码以JS语法解析: 标签中的js表达式必须用{ }包含babel.js的作用 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行只要用了JSX都要加上typetext/babel, 声明需要babel来处理 jsx语法规则
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.title {background-color: orange;width: 200px;}/style
/head
body
!--准备好一个“容器”--
div idtest/div!--引入react核心库--
script typetext/javascript src../js/react.development.js/script
!--引入react-dom用于支持react操作DOM --
script typetext/javascript src../js/react-dom.development.js/script
!--引入babel用于将jsx转为js --
script typetext/javascript src../js/babel.min.js/scriptscript typetext/babelconst myId aTgUiGuconst myData HeLlo,rEaCt//1.创建虚拟DOMconst VDOM (divh2 classNametitle id{myId.toLowerCase()}span style{{color: white, fontSize: 29px}}{myData.toLowerCase()}/span/h2h2 classNametitle id{myId.toUpperCase()}span style{{color: white, fontSize: 29px}}{myData.toLowerCase()}/span/h2input typetext/input/div)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))// jsx语法规则:// 1.定义虚拟DOM时,不要写引号。// 2.标等中混入Js表达式时要用// 3.样式的类名指定不要用class要用className.// 4.内联样式要用style{{key : value}}的形式去写。// 5.只有一个根标签// 6.标签必须闭合// 7.标签首字母// (1).若小写字母开头则将改标签转为html中同名元素若html中无该标签对应的同名元素则报错。// (2).若大写字母开头react就去渲染对应的组件若组件没有定义则报错。/script
/body
/html JSX练习
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.title {background-color: orange;width: 200px;}/style
/head
body
!--准备好一个“容器”--
div idtest/div!--引入react核心库--
script typetext/javascript src../js/react.development.js/script
!--引入react-dom用于支持react操作DOM --
script typetext/javascript src../js/react-dom.development.js/script
!--引入babel用于将jsx转为js --
script typetext/javascript src../js/babel.min.js/scriptscript typetext/babelconst data [Angular, React, Vue]//1.创建虚拟DOMconst VDOM (divh1前端js框架列表/h1ul{data.map((item, index) {return li key{index}{item}/li})}/ul/div)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))
/script
/body
/html
运行结果 模块与组件、模块化与组件化的理解
模块
理解向外提供特定功能的js程序, 一般就是一个js文件为什么要拆成模块随着业务逻辑增加代码越来越多且复杂作用复用js, 简化js的编写, 提高js运行效率
组件
理解用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)为什么要用组件 一个界面的功能更复杂作用复用编码, 简化项目编码, 提高运行效率
模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
