React的安装、JSX语法
1. React的安装
准备好默认的index.html和package.json，在根目录的集成终端下： npm i react react-dom
react包是核心，提供创建元素，组件等功能
react-dom包提供DOM相关功能(把创建好的元素渲染到页面中)
2. React的使用
2.1 使用React脚手架初始化项目
npx create-react-app 项目名项目（取名my-app）安装成功会看到Happy hacking!
启动项目，在项目根目录(
cd my-app)执行命令：npm start若安装了yarn，就用
yarn start
yarn命令简介
yarn 是Facebook发布的包管理器，可以看做是npm的替代品，功能与npm相同
yarn具有快速，可靠和安全的特点
初始化新项目：yarn init
安装包： yarn add 包名称
安装项目依赖： yarn
会自动跳转到http://localhost:3000/
也可以在集成终端打开链接进行访问（右键检查元素）
2.2 脚手架中使用React
（在src的index.js里面）
导入react和react-dom两个包
import React from 'react' import ReactDOM from 'react-dom' 复制代码
使用JSX语法创建react元素
let h1 = <h1>我是通过JSX创建的元素</h1> 复制代码
渲染react元素到页面
ReactDOM.render()方法，把创建好的react元素h1（或组件参数）渲染到页面中
参数一：要渲染的react元素 参数二：DOM对象，用于指定把元素渲染到页面中的位置（挂载点） 复制代码
ReactDOM.render(h1,document.getElementById('root')) //拿到页面中id为root的DOM对象作为挂载点 复制代码注意点
React元素的属性名使用驼峰命名法
特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex （原来在html中，现在在jsx中）
如果没有子节点的React元素可以用
/>来结束推荐：使用小括号包裹JSX，从而避免JS中自动插入分号报错
import React from 'react' import ReactDOM from 'react-dom' //span没有子节点 const title = ( <h1 className="title"> Hello JSX <span /> </h1> ) // 渲染react元素 ReactDOM.render(title, document.getElementById('root')) 复制代码检查元素：
<body> <div id="root"> <h1 class="title"> "Hello JSX" <span></span> </h1> </div> </body> 复制代码
3. JSX语法:（★★★）
3.1 嵌入JS表达式
即把存储在js中的数据，展示在JSX中
语法：{JavaScritp表达式}
let content = '插入的内容' //存储在js中的数据 let h1 = ( <h1>我是通过JSX创建的元素+ {content}</h1> ) 复制代码注意点
只要是合法的js表达式(如各种数据类型）都可以进行嵌入
JSX自身也是js表达式
const h1 = <h1>我是JSX</h1> //h1是JSX，JSX自身也是js表达式，也可以嵌入到JSX中 const dv = ( <div>嵌入表达式：{h1}</div> ) 复制代码
注意：js中的对象是不能嵌入，一般只会出现在style属性中
注意：在{}中不能出现语句（如if/for）等
import React from 'react' import ReactDOM from 'react-dom' // 函数调用表达式 const sayHi = () => 'Hi~' //函数调用后返回字符串Hi~ const dv = <div>我是一个div</div> //dv是JSX const title = ( <h1> Hello JSX <p>{1}</p> <p>{'a'}</p> <p>{1 + 7}</p> <p>{3 > 5 ? '大于' : '小于等于'}</p> <p>{sayHi()}</p> {dv} {/*JSX自身也是js表达式，也可以嵌入到JSX中*/} {/* 错误演示:注释是js中的，嵌入到jsx中的注释也需要用花括号括起来 */} {/* <p>{ {a: '6'} }</p> 花括号里一般不写对象，除非在style属性中*/} {/* { if (true) {} } 花括号中不能出现语句 */} {/* { for (var i = 0; i < 10; i++) {} } 花括号中不能出现语句*/} </h1> ) // 渲染react元素 ReactDOM.render(title, document.getElementById('root')) 复制代码3.2 条件渲染
场景：loading效果
根据不同的判断逻辑，返回不同的JSX结构，然后渲染到页面中:
let isLoading = true let loading = ()=>{ if(isLoading){ return <div>Loading...</div> } return <div>加载完成</div> } 复制代码用 if/else 或 三元运算符 或 逻辑与运算符 来实现
import React from 'react' import ReactDOM from 'react-dom' /* 条件渲染： */ const isLoading = false // if-else // const loadData = () => { // if (isLoading) { // return <div>loading...</div> // } // return <div>数据加载完成，此处显示加载后的数据</div> // } // 三元表达式： // const loadData = () => { // return isLoading ? (<div>loading...</div>) : (<div>数据加载完成，此处显示加载后的数据</div>) // } // 逻辑与运算符： const loadData = () => { return isLoading && (<div>loading...</div>) } const title = ( <h1> 条件渲染： {loadData()} {/*把函数的调用嵌入JSX*/} </h1> ) // 渲染react元素 ReactDOM.render(title, document.getElementById('root')) 复制代码3.3 列表渲染
渲染一组数据，用数组的 map () 方法
map() 方法返回一个新数组，数组中的元素为原始数组元素按序依次调用函数处理后的值。
arr.map()
注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一
原则：map()遍历谁，就给谁添加key属性
注意：尽量避免使用(可变化的)索引号作为key
let arr = [{ id:1, name:'三国演义' },{ id:2, name:'水浒传' },{ id:3, name:'西游记' },{ id:4, name:'红楼梦' }] const list = ( <ul> {arr.map(item => <li key={item.id}> {item.name} </li>)} </ul> ) ReactDOM.render(list,document.getElementById('root')) 复制代码3.4 样式处理
行内样式 -style
在style里以对象的方式嵌入，繁琐，不便阅读
<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li> 复制代码类名 -className（推荐）
创建CSS文件编写样式代码（src的css文件夹中）
.title { text-align: center } 复制代码在js中进行引入，设置类名即可
import React from 'react' import ReactDOM from 'react-dom' // 引入css import './css/index.css' const list = ( <h1 className="title" style={{ color: 'red', backgroundColor: 'skyblue' }}> JSX的样式处理 </h1> ) // 渲染react元素 ReactDOM.render(list, document.getElementById('root')) 复制代码小结
JSX是React的核心内容
JSX表示在JS代码中写HTML结构，是React声明式的体现（只需要描述页面是什么样子）
使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
推荐使用className的方式给JSX添加样式
作者：混得好差
链接：https://juejin.cn/post/7028758378167926798