React基础知识点
目标
能够说出React是什么
能够说出React的特点
能够掌握React的基本使用
能够使用React脚手架
什么是React （★★★）
React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来
特点
声明式
你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI
基于组件
组件时React最重要的内容，组件表示页面中的部分内容
学习一次，随处使用
使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用
React基本使用
React的安装
npm i react react-dom
react 包是核心，提供创建元素，组件等功能
react-dom 包提供DOM相关功能
React的使用
引入react和react-dom的两个js文件<scriptsrc="./node_modules/react/umd/react.development.js"></script><scriptsrc="./node_modules/react-dom/umd/react-dom.development.js"></script>
创建React元素
// 创建元素节点// 1. 元素名称// 2. 元素属性 传递的是个对象// 3. 元素内容lettitle=React.createElement('li', null, 'hellow react');
渲染到页面
// 渲染到页面ReactDOM.render(title, root)
React脚手架（★★★）
React脚手架意义
脚手架是开发现代Web应用的必备
充分利用 Webpack，Babel，ESLint等工具辅助项目开发
零配置，无需手动配置繁琐的工具即可使用
关注业务，而不是工具配置
使用React脚手架初始化项目
初始化项目，命令： npx create-react-app my-pro
npx 目的：提升包内提供的命令行工具的使用体验
原来：先安装脚手架包，再使用这个包中提供的命令
现在：无需安装脚手架包，就可以直接使用这个包提供的命令
create-react-app 这个是脚手架名称 不能随意更改
my-pro 自己定义的项目名称
启动项目，在项目根目录执行命令： npm start
yarn命令简介
yarn 是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
yarn具有快速，可靠和安全的特点
初始化新项目：yarn init
安装包： yarn add 包名称
安装项目依赖： yarn
脚手架中使用React
导入react和react-dom两个包
importReactfrom'react'importReactDOMfrom'react-dom'
创建元素
leth1=React.createElement('h1',null,'我是标题')
渲染到页面
ReactDOM.render(h1,document.getElementById('root'))
JSX的使用
目标
知道什么是JSX
能够使用JSX创建React元素
能够在JSX中使用JavaScript表达式
能够使用JSX的条件渲染和列表渲染
能够给JSX添加样式
概述
JSX产生的原因
由于通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不爽
JSX的概述
JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码
优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率
简单入门使用（★★★）
使用步骤
使用JSX语法创建react元素
leth1=<h1>我是通过JSX创建的元素</h1>
使用ReactDOM来渲染元素
ReactDOM.render(h1,document.getElementById('root'))
为什么在脚手架中可以使用JSX语法
JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
需要使用babel编译处理后，才能在浏览器环境中使用
create-react-app脚手架中已经默认有该配置，无需手动配置
编译JSX语法的包： @bable/preset-react
注意点
React元素的属性名使用驼峰命名法
特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
如果没有子节点的React元素可以用 /> 来结束
推荐：使用 小括号包裹JSX，从而避免JS中自动插入分号报错
JSX语法（★★★）
JSX是来描述页面的结构，我们一般在编写业务逻辑渲染页面的时候，需要涉及到传递值，调用函数，判断条件，循环等，这一些在JSX中都能得到支持
嵌入JS表达式
语法：{JavaScritp表达式}
例子：
letcontent='插入的内容'leth1=<h1>我是通过JSX创建的元素+ {content}</h1>
注意点
只要是合法的js表达式都可以进行嵌入
JSX自身也是js表达式
注意：js中的对象是一个例外，一般只会出现在style属性中
注意：在{}中不能出现语句
条件渲染
根据不同的条件来渲染不同的JSX结构
letisLoading=trueletloading= ()=>{ if(isLoading){ return<div>Loading...</div> } return<div>加载完成</div>}
可以发现，写JSX的条件渲染与我们之前编写代码的逻辑是差不多的，根据不同的判断逻辑，返回不同的 JSX结构，然后渲染到页面中
列表渲染
如果需要渲染一组数据，我们应该使用数组的 map () 方法
注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一
原则：map()遍历谁，就给谁添加key属性
注意：尽量避免使用索引号作为key
letarr= [{ id:1, name:'三国演义'},{ id:2, name:'水浒传'},{ id:3, name:'西游记'},{ id:4, name:'红楼梦'}] letul= (<ul> {arr.map(item=><likey={item.id}>{item.name}</li>)} </ul>) ReactDOM.render(ul,document.getElementById('root'))
样式处理
行内样式 -style
在style里面我们通过对象的方式传递数据
<likey={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐
类名 -className
创建CSS文件编写样式代码
.container { text-align: center}
在js中进行引入，然后设置类名即可
import'./css/index.css'<liclassName='container'key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>
小结
JSX是React的核心内容
JSX表示在JS代码中写HTML结构，是React声明式的体现
使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
推荐使用className的方式给JSX添加样式
React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能
