- A+
1 React概述
1.1 什么是react
React 是一个用于构建用户界面的 JavaScript 库。
用户界面：HTML页面（前端）
React 主要用来写HTML页面，或构建Web应用
如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了
完整的 M 和 C 的功能。
React 起源于 Facebook 的内部项目，后又用来架设 Instagram 的网站，并于 2013 年 5 月开源
1.2 react特点
- 声明式
你只需要描述 UI（HTML）看起来是什么样，就跟写HTML一样
React 负责渲染 UI，并在数据变化时更新 UI
const jsx = <div className="app"> <h1>Hello React! 动态变化数据：{count}</h1> </div> -
基于组件
-
学习一次，随处使用:可以开发web、移动端(
React-native)、AR(React360)等等。
2 React基本使用
2.1 react的安装
npm i react react-dom react 包是核心，提供创建元素、组件等功能
react-dom 包提供 DOM 相关功能等
2.2 react的使用
- 第一步：引入依赖
<script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> -
第二步：创建react元素
-
第三步：渲染react元素到页面中
<div id="root"></div> <script> //创建react元素 const title = React.createElement('h1', null, 'Hello React'); //渲染react元素 ReactDOM.render(title, document.getElementById('root')) </script> 2.3 方法说明
- React.createElement() 说明（知道）
// 返回值：React元素 // 第一个参数：要创建的React元素名称 // 第二个参数：该React元素的属性 // 第三个及其以后的参数：该React元素的子节点 const el = React.createElement('h1', { title: '标题' }, 'Hello React') - ReactDOM.render()说明 (掌握)
// 第一个参数：要渲染的React元素 // 第二个参数：DOM对象，用于指定渲染到页面中的位置 ReactDOM.render(el, document.getElementById('root')) 3 React脚手架的使用
3.1 脚手架意义
脚手架是开发 现代Web 应用的必备。
充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。
零配置，无需手动配置繁琐的工具即可使用。
关注业务，而不是工具配置。
3.2 使用 React脚手架初始化项目
第一步：初始化项目
npx create-react-app my-app 第二步：启动项目
npm start 或者 yarn start 
3.3 npx命令介绍
-
npm v5.2.0 引入的一条命令
-
目的：提升包内提供的命令行工具的使用体验
-
原来：先安装脚手架包，再使用这个包中提供的命令
-
现在：无需安装脚手架包，就可以直接使用这个包提供的命令
3.4 补充说明
推荐使用：npx create-react-app my-app npm init react-app my-app yarn create react-app my-app yarn 是 Facebook 发布的包管理器，可以看做是 npm 的替代品，功能与 npm 相同 yarn 具有快速、可靠和安全的特点 初始化新项目：yarn init 安装包： yarn add 包名称 安装项目依赖项： yarn 其他命令，请参考yarn文档 3.5 在脚手架中使用react
第一步：导入 react 和 react-dom 两个包
import React from 'react' import ReactDOM from 'react-dom' 第二步：调用 React.createElement() 方法创建 react 元素。
第三步：调用 ReactDOM.render() 方法渲染 react 元素到页面中。
4 jsx的基本使用
4.1 jsx简介
JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。
优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率
JSX 是 React 的核心内容
4.2 使用步骤
第一步：使用 JSX 语法创建 react 元素
let h1 = <h1>hello React</h1>; 第二步：使用 ReactDOM.render() 方法渲染 react 元素到页面中
ReactDOM.render(h1,document.getElementById("root")); 4.3 注意点
-
React元素的属性名使用驼峰命名法
-
特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex 。
-
没有子节点的React元素可以用 /> 结束 。
-
推荐：使用小括号包裹 JSX ，从而避免 JS 中的自动插入分号陷阱。
// 使用小括号包裹 JSX const dv = ( <div>Helo JSX</div> ) 问题：为什么脚手架中可以使用 JSX 语法？
JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展 需要使用 babel 编译处理后，才能在浏览器环境中使用 create-react-app 脚手架中已经默认有该配置，无需手动配置 编译 JSX 语法的包为：@babel/preset-react 5 jsx使用js表达式
5.1 嵌入表达式
数据存储在JS中
语法：{js表达式}
注意：语法中是单大括号，不是双大括号
const name = 'Jack' const dv = ( <div>你好，我叫：{name}</div> ) 5.2 注意点
单大括号中可以使用任意的 JavaScript 表达式
JSX 自身也是 JS 表达式
const h1 = <h1>我是JSX</h1> const dv = ( <div>嵌入表达式：{h1}</div> ) 注意：JS 中的对象是一个例外，一般只会出现在 style 属性中
注意：不能在{}中出现语句（比如：if/for 等）
6 jsx条件渲染
场景：loading效果
条件渲染：根据条件渲染特定的 JSX 结构
可以使用if/else或三元运算符或逻辑与运算符来实现
import React from "react"; import ReactDOM from "react-dom"; let isLoading = true; let load = () =>{ if(isLoading){ return <h2>加载中。。。</h2> } return <h2>加载成功</h2> } // let load = () => { // return isLoading ? <h2>加载中。。。</h2> : <h2>加载成功</h2>; // }; let el = <div>{load()}</div>; ReactDOM.render(el, document.getElementById("root")); 7 列表渲染
如果要渲染一组数据，应该使用数组的 **map() **方法
注意：渲染列表时应该添加 key 属性，key 属性的值要保证唯一
原则：map() 遍历谁，就给谁添加 key 属性
注意：尽量避免使用索引号作为 key
import React from "react"; import ReactDOM from "react-dom"; //定义数据 const songs = [ { id: 1, name: "痴心绝对" }, { id: 2, name: "像我这样的人" }, { id: 3, name: "南山南" }, ]; //生成react元素 let arr = songs.map(v=><p key={v.id}>{v.id+"---"+v.name}</p>); let el = <div>{arr}</div>; //渲染 ReactDOM.render(el, document.getElementById("root")); 8 jsx样式处理
8.1 行内样式
<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}> JSX的样式处理</h1> 注意：属性名称驼峰命名,并且属性值要用引号包裹起来
8.2 类名
// 导入样式文件 import './index.css' //使用 <h1 className="title"> JSX的样式处理</h1> 
