React 初级开箱即用，从入门到放弃react脚手架等基础语法手抄稿主要记录react的基础语法，api，组件，路由

引入 / 下载`React`

01 npm i react react-dom

也可以直接html使用cdn引入

npm i react react-dom -S-D
//引入后可以直接使用
const test = React.createElement('h1', {className:'123'}, 'hello')
ReactDOM.createRoot(document.getElementById('app')).render(test);

02 脚手架安装

npx create-react-app projectName

03 导入 react 和 react-dom

import React from 'react';
import ReactDOM from 'react-dom/client';
//使用React.StrictMode
//使用ReactDOM.createRoot
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

二、`React`的基本使用

1: jsx是 js xml 的缩写，降低学习成本，提高开发效率

const test = <h1>hello word</h1>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>hello word</h1>);

2: jsx是要经过babel编译处理后，才能在浏览器内运行

插件包名称：@bable/prest-react

3: `react`元素属性使用的是驼峰命名法

class => className 使用小括号包裹其中代码 const test =（ <h1>hello word</h1>）

4: `jsx` 表达式

const name = 'jack'
const dv = (<div>{name}</div>)

5: 条件渲染

根据条件渲染jsx结构

const loading = true
const loadData = ()=>{
// if(loading){
// return (<div>loading...</div>)
// } 
// return (<div>完成</div>)
    return (loading ? (<div>loading...</div>) : (<div>完成</div>))
}

6: 逻辑与运算

根据条件渲染jsx结构

const loading = true
const test = ()=> ( loading &&(<div>loading...</div>) )

7: 列表渲染

渲染数据用map方法,子元素必须要有key，尽量避免索引作为key

const test = ()=> {
    return (<ul>
        {arr.map(item=><li key={item}>{item}</li>) }
    </ul>
})

8: jsx样式处理

行内(不推荐)：

<div style={{'color':'red',backgroundColor:'#fff'}}>{name}</div>

className(推荐)：

<div className="test">{name}</div>

三、`React组件`的基本介绍、使用

1. 基本介绍

组件是 react 中的一等公民，使用react 就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用，独立可组合

2. `react` 组件的两种创建方式

使用函数创建组件
使用类创建组件

函数组件：必须是首字母大写，必须返回出来标签内容或者null，函数名称作为组件标签名字

function Hello(){
    return (
        <div>Hello word</div>
    )
}
ReactDom.render(<Hello/>,root);

类组件：使用es6中的class 创建组件，名字必须大写字母开头；组件应该继承React.Component父类，从而可以使用父组件里面提供的方法或者属性；类组件必须提供render方法；render()必须有返回值，表示组件该有的值

class Hello extends React.Component {
    render (){
        return <div>Hello word</div>
    }
}
ReactDom.render(<Hello/>,document.getElementById('root'))

3. 抽离为单独的JSX文件

创建child.js,引入React
创建组件（函数/类）
导出组件，在父组件中引入

//child.js
import React from 'react'
class Hello extends React.Component {
    render (){
        return <div>Hello word</div>
    }
}
export default Hello

//parent.js
import Hello from './Hello'
ReactDom.render(<Hello/>,document.getElementById('root'))

4. 事件绑定

React事件绑定语法与Dom事件语法相似
语法：on+事件名称(cilck)
导出组件，在父组件中引入
注意：React事件采用驼峰命名法，比如：onMouseOver

import React from 'react'
class Hello extends React.Component {
    handleCilck(){
        console.log(123)
    }
    render (){
        return <div onclick={this.handleCilck}>Hello word</div>
    }
}

5. 事件对象

可以通过事件处理程序的参数获取到对象
语法：on+事件名称(cilck)
事件对象=>合成事件：兼容所有浏览器，无需担心浏览器兼容性
注意：React事件采用驼峰命名法，比如：onMouseOver

const Hello = ()=>{
    const handleClick =(e) => {
        e.preventDefault()
        console.log('事件对象',e)
    }
    return (
        <a onclick={handleCilck}>click me</a>
    )
}

6. 事件绑定

import React from 'react'
    class Hello extends React.Component {
        handleCilck(){
            console.log(123)
        }
    render (){
        return <div onclick={this.handleCilck}>Hello word</div>
    }
}

三、有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件
状态(state)即数据
函数组件没有自己的状态，只负责数据展示（静态）
类组件有自己的状态，负责更新UI，让页面动起来

例子：比如计数器，需要更新UI，所以就使用有状态组件来完成只做将他展示，就使用无状态组件

1. 状态组件和无状态组件组件中的`state` 和`setState`

state的基本使用
state即是数据，是组件内部私有的数据，只能组件内部中使用
state的值是对象，表示一个组件中可以有多个数据

class Hello extends React.Component { //简化写法
    constructor(){
        super()
        this.state ={
            count:0
        }
    }
    render (){
        return (<div>有状态组件</div>)
    }
}

class Hello extends React.Component { //简化写法
    state ={ count:0 }
    render (){
        return (<div>有状态组件</div>)
    }
}

`setState` 的修改状态

state数据是可变的
语法：this.setState({key:value})
state的值不能直接修改，必须要用 setState()!!!
setState作用：1.修改state 2.更新UI
思想：数据驱动视图

class Hello extends React.Component { //简化写法
    state ={ count:0 }
    render (){
        return (<div onClick={()=>{setState(count:1)}}>有状态组件</div>)
    }
}

从`jsx`中抽离时间处理程序

jsx中掺杂过多的js逻辑代码，会显得非常的乱,其中this指向，可以使用：bind，apply等方式解决
语法：this.setState({key:value})
推荐：将逻辑抽离到单独的方法中，保证jsx结构清晰
setState作用：1.修改state 2.更新UI
思想：数据驱动视图

    this.myHandler = this.myHandler.bind(this)
    myHandler () {
        this.setState({key:value})
    }

正在更新中。。。

React 初级开箱即用，从入门到放弃

引入 / 下载React