React（超详细教程）

教程

官网

创建项目

• 安装脚手架

// 1 首先我们要全局安装一下这个
npm install -g create-react-app

//2 创建项目
create-react-app my-app (my-app这个是自定义的名称)

主要依赖 react, react-dom, react-scripts

然后运行

cnpm run start 

删除多余内容

src里面只保留app.js/index.js

app.js
只保留这些

function App() {
  return (
    <div className="App">
    你好react
    </div>
  );
}

export default App;

index.js
只保留这些

// react必要的核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';//导入项目的根组件
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

然后再次运行即可

基础

JSX基础

列表渲染

//使用map方法遍历渲染列表
const list = [
  { id: '100', name: 'value' },
  { id: '1001', name: 'value1' },
  { id: '1002', name: 'value2' }
]
function App() {
  return (
    <div className="App">
      {/* 循环map循环 必须加key值 */}
      <ul>{list.map(item => {return(<li key={item.id}>{ item.name }</li>)})}</ul>
    </div>
  );
}

export default App;

条件渲染

基础条件

//基础条件
const isLogin=false
function App() {
  return (
    <div className="App">
      {/* // 逻辑与 */}
      {isLogin && <span>this is span</span>}
       {/* 3目运算 */}
      {isLogin ? <span>111</span> : <span>222</span>}
    </div>
  );
}

export default App;
打印是222

复杂条件

//复杂条件
const isLogin = 1

function getArr() { 
  if (isLogin === 1) {
    return <div>显示内容</div>
  } else if (isLogin === 2) {
    return <div>显示内容1</div>
  } else{
    return <div>显示内容2</div>
  }
}
function App() {
  return (
    <div className="App">
      {getArr()}
    </div>
  );
}

export default App;

打印是 显示内容

事件绑定(PS点击事件)

无参数
function App() {
  const clickon = () => { 
    console.log('打印的事件');
  }

  return (
    <div className="App">
      <div onClick={clickon}>点我</div>
    </div>
  );
}

export default App;

有参数

function App() {
  const clickon = (name) => {
    console.log('打印的事件', name);
  }

  return (
    <div className="App">
      <div onClick={() => clickon('kangkang')}>点我</div>
    </div>
  );
}

export default App;

组件使用

// 定义组件
const Button = () => {
  return <button>点我</button>
}

function App() {
  return (
    <div className="App">
    //引入组件
      <Button></Button>
    </div>
  );
}

export default App;

usestate

useState是一个函数 允许我们向组件添加一个状态变量 
从而控制影响组件的渲染

useState实现一个计数器的按钮

import { useState } from "react";
function App() {
  // 调用 useState添加一个状态变量
  // count状态变量 setCount修改变量的方法
  const [count, setCount] = useState(0)
  const handleChange = () => {
    // 点击回调事件
    setCount(count + 1)
  }
  return (
    <div className="App">
      <button onClick={handleChange}>{count}</button>
    </div>
  );
}

export default App;

usestate修改状态

import { useState } from "react";
function App() {
  // 调用 useState添加一个状态变量
  // 声明个form里面包含name
  const [form, setForm] = useState({ name: 'jick' })
  const handleChange = () => {
    // 点击回调事件
    setForm({
      ...form,
      name: 'tom'
    })
  }
  return (
    <div className="App">
      <button onClick={handleChange}>点击修改{form.name}</button>
    </div>
  );
}

export default App;

样式控制

删除功能

在这里插入代码片

tab切换

实现tab的dom
声明一个currentId用于标识当前选中项
根据currentId动态控制样式
根据currentId动态展示内容

import React, { useState } from "react"

const Nav = () => {
  const [currentId, setCurrentId] = useState(1)
  const options = [
    { label: "选项一", id: 1 },
    { label: "选项二", id: 2 },
    { label: "选项三", id: 3 },
    { label: "选项四", id: 4 },
  ]
  const changeId = (id) => {
    setCurrentId(id)
  }
  return (
    <div className="test_box">
      {/* Tab栏 */}
      <ul className="test_nav">
        {options.map((item) => {
          return (
            <li
              key={item.id}
              onClick={() => changeId(item.id)}
              className={item.id == currentId ? "active" : ""}
            >
              {item.label}
            </li>
          )
        })}
      </ul>
      {/* 内容区域 */}
      <div style={{ height: 200, backgroundColor: "pink" }}>
        <div style={{ display: currentId == 1 ? "block" : "none" }}>内容一</div>
        <div style={{ display: currentId == 2 ? "block" : "none" }}>内容二</div>
        <div style={{ display: currentId == 3 ? "block" : "none" }}>内容三</div>
        <div style={{ display: currentId == 4 ? "block" : "none" }}>内容四</div>
      </div>
    </div>
  )
}

export default Nav

排序(升降序)

在这里插入代码片

表单绑定

在这里插入代码片

获取dom

import { useRef } from "react";
function App() {
  // userRef生成ref对象 绑定dom标签里面
  // dom可用时 ref.current获取dom
  // 渲染完毕后dom生成才可以
  const inputRef = useRef(null)
  const handleChange = () => {
    // 点击回调事件
    console.log(inputRef.current);//获取dom(input标签值)
  }
  return (
    <div className="App">
      <input ref={inputRef}></input>
      <button onClick={handleChange}>获取dom</button>
    </div>
  );
}

export default App;

路由配置

在这里插入代码片

组件通信

父子

子父

非父子

context机制跨层传递数据

useEffect使用

自定义hook实现