react学习记录

一、目录结构react优秀代码之react目录结构简洁之道React 作为一个库，不会决定你如何组织项目的结构。这是件好事，因为这样 - 掘金【React】项目的目录结构全面指南_react项目结构-CSDN博客

1、创建项目：开发文档

Getting Started | Create React App 中文文档

node18以上

npx create-react-app my-app
cd my-app
npm start

1）可能的报错：react项目运行出现 One of your dependencies, babel-preset-react-app, is importing the “xxxxxxx”

npm install --save-dev @babel/plugin-proposal-private-property-in-object

2）创建ts的

npx create-react-app my-app --template typescript

3）vite创建的

npm init vite

4)样式初始化：

npm i reset-css
引入

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import "reset-css"//引入
import App from './App.tsx'

5）引入sass  npm i --save-dev sass

6）路径别名配置 @=src

vite.config.ts文件里面

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path"// https://vite.dev/config/
export default defineConfig({plugins: [react()],resolve: {alias: {"@": path.resolve(__dirname, "./src")}}
})

使用ts可能会报错无path，需要安装 npm i -D @types/node

别名的提示配置：在tscofig.app.json里面

compilerOptions中添加

"baseUrl": "./","paths": {"@/*": ["src/*"]},

7）ant design 按需引入

npm install vite-plugin-style-import@1.4.1 -D

二、路由

import App from "../App"
import Home from "../views/Home"
import About from "../views/About"
import {BrowserRouter,Routes,Route} from "react-router-dom"
//两种路由模式的组件:BrowserRouter(History模式)，HashRouter(Hash模式)
// const baseRouter =()=>{1return()/1 }// 以上写法可以简写为:
const baseRouter =()=>(<BrowserRouter><Routes><Route path="/" element={<App/>}><Route path="/home" element={<Home/>}></Route><Route path="/about" element={<About/>}></Route></Route></Routes></BrowserRouter>
)
export default baseRouter

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import "reset-css"
import "@/assets/styles/global.scss"
import App from './App.tsx'
import Router from "@/router";createRoot(document.getElementById('root')!).render(<StrictMode><Router />//修改这个</StrictMode>,
)

 

import {Outlet} from "react-router-dom";
function App() {return (<><Outlet></Outlet></>)
}
export default App

react里面的：outlet = vue里面的: router view

生命周期
【React 面经】生命周期详解：不同阶段与方法解析-CSDN博客

实例：表单创建

react+antd动态表单以及数组对象示例 - 灰信网（软件开发博客聚合）

更新状态数组中的某个对象

tempArray[index] = {...tempArray[index], name: event.target.value};

向数组中添加一个空对象

form.setFieldsValue({"contacts":[...contacts,{name:'',mobile:''}]})

删除数组中索引为index的元素

form.setFieldsValue({"contacts":[...contacts.slice(0,index),...contacts.slice(index+1)]})return setContacts([...contacts.slice(0,index),...contacts.slice(index+1)])

原理：合并【0，index) [index+1，末尾】

• contacts.slice(0, index) 创建一个新数组，包含从 contacts 数组开始到索引 index（不包括 index）的所有元素。
• contacts.slice(index + 1) 创建另一个新数组，包含从 contacts 数组索引 index + 1 到数组末尾的所有元素。

table

React+antd动态增加Table可编辑行_react中class组件实现一个可编辑表格-CSDN博客

父子组件传值

【实例】React 组件传值方法: Props、回调函数、Context、路由传参_react 执行子组件中的方法并接受返回值-CSDN博客

报错 message.error('请先保存');