React的入门学习（一）
作者: 前端AC | 原文: https://juejin.cn/post/7495570300123922444
1-创建项目
react脚手架：create-react-app
npx create-react-app 名称 --template typescript创建完成之后截图：
之后进入项目文件夹
cd 项目
npm run start
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 项目配置文件：
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里面添加以下内容：
现在我们就能正常引入啦！
"baseUrl": ".",// .表示当前目录，就是src
"paths": {
"@/*": [
"src/*"
]
}然后我们打开浏览器，发现会有错误：
然后重新npm run start，就成功配置好了。
2-代码规范设置pretter
1-配置.editorconfig文件
# 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 = false2-想从0开始配置
安装prettier：npm i prettier -D
然后在根目录下新建.prettierrc文件，然后在里面配置我们想要的规范。
配置项详解
-
useTabs
- 作用：控制使用
Tab缩进还是空格缩进 - 取值：
false（使用空格）
- 作用：控制使用
-
tabWidth
- 作用：当使用空格缩进时，定义空格数量
- 取值：
2（推荐）
-
printWidth
- 作用：单行最大字符长度
- 取值：
80（主流推荐），也可选100或120
-
singleQuote
- 作用：控制使用单引号/双引号
- 取值：
true（使用单引号）
-
trailingComma
- 作用：是否在多行结构末尾添加逗号
- 取值：
"none"（例如对象最后一个属性后不加逗号）
-
semi
- 作用：控制语句末尾分号
- 取值：
false（不加分号）
完整配置示例
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}注意事项
- 所有配置项名称需区分大小写（如
tabWidth不能写成tabwidth） - 字符串值需使用双引号包裹（如
"none"） - 建议通过
Ctrl+S保存配置文件后重启编辑器生效
或者我们可以在scripts添加，然后终端我们可以npm run prettier检测。
还可以创建.prettierignore文件，放上：
# 文件/目录忽略规则列表
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*然后在终端npm run prettier,就会系统给你格式化。
3-ESlint
npx eslint --init
4-目录结构的划分
5-安装less
npm i craco-less@2.1.0-alpha.0
在craco.config.js引入CracoLessPlugin
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配置好：
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 routes2-然后在views下面新建discover/index.tsx
// 修复后代码
import React from 'react';
const Discover = () => {
return <div>discover</div>
};
export default Discover;3-在app.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：
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就能看见内容了。第一天学习到此结束，希望点个赞支持一下波珠波珠会一直持续学习的。