React的入门学习（一）

1-创建项目

react脚手架：create-react-app

js 复制代码

npx create-react-app 名称 --template typescript

创建完成之后截图：

之后进入项目文件夹

arduino 复制代码

cd 项目
npm run start

可以删除一些暂时用不到的文件：

首先先来看一下index.tsx文件里面的代码代表了什么意思。

ts 复制代码

import React from 'react';
import ReactDOM from 'react-dom/client'
import App from './App';
/*导入依赖：
React：React核心库
ReactDOM：React的DOM渲染库
App：你的主应用组件（从'./App'导入*/
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
/*创建根节点：
- 使用ReactDOM.createRoot()创建React 18新的并发模式根节点
- document.getElementById('root')获取HTML中的根DOM元素
- as HTMLElement是TypeScript的类型断言*/
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
/*渲染应用：
- 使用root.render()方法渲染应用
- <React.StrictMode>是React的严格模式，用于检测潜在问题
- <App/>是你的主应用组件
*/

项目配置：

安装 npm i @craco/craco@alpha -D。然后创建craco.config.js文件用于配置 webpack 别名的 React 项目配置文件：

tsx 复制代码

const path = require('path')
const resolve =(dir)=>path.join(__dirname,dir)

module.exports={
  webpack:{
    alias:{
      '@':resolve('src')
    }
  }
}

然后我们可以在index.tsx引用一下

import App from '@/App';，会发现报错，这是ts类型检测报出来的，我们可以在tsconfig.json里面添加以下内容：

现在我们就能正常引入啦！

json 复制代码

 "baseUrl": ".",// .表示当前目录，就是src
    "paths": {
      "@/*": [
        "src/*"
      ]
    }

然后我们打开浏览器，发现会有错误：为什么呢？因为我们在npm run start的时候使用的还是react-scripts的启动，我们需要更换成craco start。在package.json更改成如下（注意，eject不用更改，因为会暴露出去）：

然后重新npm run start，就成功配置好了。

2-代码规范设置pretter

1-配置.editorconfig文件

ini 复制代码

# http://editorconfig.org
root = true
[*]#·表示所有文件适用
charset =utf-8#设置文件字符集为 utf-8
indent_style=space #·缩进风格(tab·space )
indent_size=2#缩进大小
end_of_line =lf#控制换行类型(lfcrcrlf)
trim_trailing_whitespace = true # 去除行尾的任意空自字符
insert_final_newline = true #始终在文件木尾插入一个新行
[*.md]#表示仅-md·文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

2-想从0开始配置

安装prettier：npm i prettier -D

然后在根目录下新建.prettierrc文件，然后在里面配置我们想要的规范。

配置项详解

useTabs
- 作用：控制使用 Tab 缩进还是空格缩进
- 取值：false（使用空格）
tabWidth
- 作用：当使用空格缩进时，定义空格数量
- 取值：2（推荐）
printWidth
- 作用：单行最大字符长度
- 取值：80（主流推荐），也可选 100 或 120
singleQuote
- 作用：控制使用单引号/双引号
- 取值：true（使用单引号）
trailingComma
- 作用：是否在多行结构末尾添加逗号
- 取值："none"（例如对象最后一个属性后不加逗号）
semi
- 作用：控制语句末尾分号
- 取值：false（不加分号）

完整配置示例

json 复制代码

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

注意事项

所有配置项名称需区分大小写 （如 tabWidth 不能写成 tabwidth）
字符串值需使用双引号包裹（如 "none"）
建议通过 Ctrl+S 保存配置文件后重启编辑器生效

或者我们可以在scripts添加，然后终端我们可以npm run prettier检测。

还可以创建.prettierignore文件，放上：

bash 复制代码

# 文件/目录忽略规则列表
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

然后在终端npm run prettier,就会系统给你格式化。

3-ESlint

npx eslint --init

4-目录结构的划分

5-安装less

npm i [email protected]

在craco.config.js引入CracoLessPlugin

tsx 复制代码

const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
const CracoLessPlugin=require('craco-less')
module.exports = {
  plugins: [
    {plugin:CracoLessPlugin}
  ],
  webpack: {
 
    alias: {
      '@': resolve('src')
    }
  }
}

6-路由搭建

npm i react-router-dom

第一种：不方便

第二种：

1-先在router下面的index.tsx配置好：

tsx 复制代码

import React from "react"//每次都要引入的，jsx语法
import { RouteObject } from "react-router-dom"//RouteObject 是 react-router-dom v6 提供的类型
提供了完整的路由配置类型检查
import Discover from "@/views/discover"

const routes: RouteObject[]=[
  {
    path: "/discover",
    element: <Discover/ >,

  }
]
export default routes

2-然后在views下面新建discover/index.tsx

tsx 复制代码

// 修复后代码
import React from 'react';

const Discover = () => {
    return <div>discover</div>
};

export default Discover;

3-在app.tsx引入路由

tsx 复制代码

import React from 'react'
import {useRoutes} from 'react-router-dom'
import routes from './router'
function App() {
  return (
    <div className="App">
      {useRoutes(routes)}
    </div>
  )
}

export default App

useRoutes` 的核心作用

将路由配置转换为可渲染的 React 元素
替代传统的 <Routes> 组件，允许在组件内部动态使用路由
接收与 <Routes> 相同的路由配置数组（RouteObject[]）

4.在index.tsx配置HashRouter：

tsx 复制代码

import React from 'react'
import ReactDOM from 'react-dom/client'
import {HashRouter} from 'react-router-dom';
import 'normalize.css'
import '@/assets/CSS/index.less'
import App from '@/App'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <HashRouter>
<App />
</HashRouter>
)

然后在浏览器输入/#/discover就能看见内容了。第一天学习到此结束，希望点个赞支持一下波珠波珠会一直持续学习的。