1基础
1-1 开发环境搭建
create-react-app是一个快速创建React开发环境的工具，底层由Webpack构件，封装了配置细节，开箱即用 执行命令：
npx create-react-app react-basic- npx - Node.js工具命令，查找并执行后续的包命令
- create-react-app - 核心包（固定写法），用于创建React项目
- react-basic React项目的名称（可以自定义）
注意
创建React项目的更多方式 https://zh-hans.react.dev/learn/start-a-new-react-project
1-2 JSX基础
1-2-1 什么是JSX
概念：JSX是JavaScript和XMl(HTML)的缩写，表示在JS代码中编写HTML模版结构，它是React中构建UI的方式
const message = 'this is message'
function App(){
return (
<div>
<h1>this is title</h1>
{message}
</div>
)
}优势：
- HTML的声明式模版写法
- JavaScript的可编程能力
1-2-2 JSX的本质
JSX并不是标准的JS语法，它是 JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中使用
1-2-3 JSX高频场景-JS表达式
在JSX中可以通过
大括号语法{}识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等
- 使用引号传递字符串
- 使用JS变量
- 函数调用和方法调用
- 使用JavaScript对象
注意
注意：if语句、switch语句、变量声明不属于表达式，不能出现在{}中
const message = 'this is message'
function getAge(){
return 18
}
function App(){
return (
<div>
<h1>this is title</h1>
{/* 字符串识别 */}
{'this is str'}
{/* 变量识别 */}
{message}
{/* 变量识别 */}
{message}
{/* 函数调用 渲染为函数的返回值 */}
{getAge()}
</div>
)
}1-2-4 JSX高频场景-列表渲染
在JSX中可以使用原生js种的
map方法实现列表渲染
const list = [
{id:1001, name:'Vue'},
{id:1002, name: 'React'},
{id:1003, name: 'Angular'}
]
function App(){
return (
<ul>
{list.map(item=><li key={item.id}>{item}</li>)}
</ul>
)
}1-2-5 JSX高频场景-条件渲染
在React中，可以通过逻辑与运算符&&、三元表达式(?😃 实现基础的条件渲染
const flag = true
const loading = false
function App(){
return (
<>
{flag && <span>this is span</span>}
{loading ? <span>loading...</span>:<span>this is span</span>}
</>
)
}1-2-6 JSX高频场景-复杂条件渲染
需求：列表中需要根据文章的状态适配 解决方案：自定义函数 + 判断语句
const type = 1 // 0|1|3
function getArticleJSX(){
if(type === 0){
return <div>无图模式模版</div>
}else if(type === 1){
return <div>单图模式模版</div>
}else(type === 3){
return <div>三图模式模版</div>
}
}
function App(){
return (
<>
{ getArticleJSX() }
</>
)
}1-3 React的事件绑定
1-3-1 基础实现
React中的事件绑定，通过语法
on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法
function App(){
const clickHandler = ()=>{
console.log('button按钮点击了')
}
return (
<button onClick={clickHandler}>click me</button>
)
}1-3-2 使用事件参数
在事件回调函数中设置形参e即可
function App(){
const clickHandler = (e)=>{
console.log('button按钮点击了', e)
}
return (
<button onClick={clickHandler}>click me</button>
)
}1-3-3 传递自定义参数
语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参
function App(){
const clickHandler = (name)=>{
console.log('button按钮点击了', name)
}
return (
<button onClick={()=>clickHandler('jack')}>click me</button>
)
}注意
注意：不能直接写函数调用，这里事件绑定需要一个函数引用
1-3-4 同时传递事件对象和自定义参数
语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应
function App(){
const clickHandler = (name,e)=>{
console.log('button按钮点击了', name,e)
}
return (
<button onClick={(e)=>clickHandler('jack',e)}>click me</button>
)
}1-4 React组件基础使用
1-4-1 组件是什么
概念：一个组件就是一个用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以服用多次 
1-4-2 组件基础使用
在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可
// 1. 定义组件
function Button(){
return <button>click me</button>
}
// 2. 使用组件
function App(){
return (
<div>
{/* 自闭和 */}
<Button/>
{/* 成对标签 */}
<Button></Button>
</div>
)
}1-4-3 组件状态管理-useState
3-1 基础使用
useState 是一个 React Hook（函数），它允许我们向组件添加一个
状态变量, 从而控制影响组件的渲染结果 和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）
function App(){
const [ count, setCount ] = React.useState(0)
return (
<div>
<button onClick={()=>setCount(count+1)}>{ count }</button>
</div>
)
}3-2 状态的修改规则
在React中状态被认为是只读的，我们应该始终
替换它而不是修改它, 直接修改状态不能引发视图更新
let [count, setCount] = useState(0);
const handleClick = () => {
// 直接修改 无法引发视图更新
count++;
console.log(count);
}
const handleClick = () => {
// 作用：
// 1. 用传入的新值修改count
// 2. 重新使用新的count渲染UI
setCount(count + 1);
}3-3 修改对象状态
对于对象类型的状态变量，应该始终给set方法一个
全新的对象来进行修改
const [form, setForm] = useState({
name: 'jack',
});
const handleChangeName = () => {
form.name = 'john';
}
const [form, setForm] = useState({
name: 'jack',
});
const handleChangeName = () => {
setForm({
...form,
name: 'john',
});
}1-4-4-组件的基础样式处理
React组件基础的样式控制有俩种方式，行内样式和class类名控制
<div style={{ color:'red'}}>this is div</div>.foo{
color: red;
}import './index.css'
function App(){
return (
<div>
<span className="foo">this is span</span>
</div>
)
}