花于陌上开个人站

React入门 v1.0 ​

第一部分 开始React程序 ​

一、构建 React 开发环境 ​

1.使用 Vite 创建项目 ​

bash
npm create vite@latest
>>输入模块名
>>选择 JavaScript + SWC
cd <模块名>
npm i  #安装相关依赖
npm run dev  #运行

SWC：是一个可扩展的基于 Rust 的平台，用于下一代快速开发工具，比 Babel 更快

2.使用 create-react-app 构建 React 开发环境 ​

bash
npm install -g create-react-app  #安装create-react-app
create-react-app <my-app>  #创建一个名为my-app的项目

3.npm下载慢解决方式 ​

bash
npm install -g cnpm --registry=https://registry.npm.taobao.org
#之后使用cnpm进行操作

二、目录结构 ​

bash
|-my-app
	|-index.html
  |-README.md
  |-package.json
  |-node_modules
    |-&lt;lib&gt;
  |-public  #不会进行编译处理
  |-src  #开发目录，会进行编译处理
    |-App.css
    |-App.jsx
    |-index.css
    |-main.jsx  #主入口文件
bash
|-my-app/
  |-README.md
  |-package.json
  |-node_modules/
  |-public/
    |-favicon.ico
    |-index.html
    |-manifest.json  #指定了开始页面index.html
  |-src/
    |-App.css
    |-App.js
    |-App.test.js
    |-index.css
    |-index.js  #入口文件
    |-logo.svg

三、构建 React 项目 ​

1.编译构建React项目 ​

bash
npm run build

2.无法打开index.html解决方法 ​

json
{
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "./",  #添加这一行
  "private": true,
  ...
}

第二部分 React基础 ​

一、React重要思想 ​

1.页面组件化 ​

组件化是指将界面划分为可重用、独立的模块。每个React组件都有自己的状态（state）和属性（props），它们用于描述组件的行为和显示内容。通过组件化，你可以将界面拆分为多个小块，使得代码更加可维护和可复用。

javascript
function ModuleName() {
  return (
    <element></element>
  )
}

2.数据驱动视图 ​

数据驱动视图是指React使用数据来驱动界面的更新。当组件的状态或属性发生变化时，React会自动重新渲染相应的部分界面。这种机制减轻了手动处理DOM更新的负担，并且使得界面保持与数据同步。你只需要关注数据的变化，而不用关心如何更新DOM。

javascript
function App() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数</button>
			{count}
    </div>
  )
}

3.React库和React框架的区别 ​

React (也称为React.js或ReactJS)是一个自由及开放源代码的前端JavaScript工具库，用于基于UI组件构建用户界面；React 框架则是通过脚手架工具搭建的一套完善前端环境，包括：路由、状态管理、数据获取、第三方的UI组件库和第三方Hooks库等的完整应用程序

4.React严格模式简介 ​

  1. 检查组件是否为纯函数
  2. 尽早发现useEffect中的错误
  3. 警告过时的API

二、ESLint与Prettier ​

1.ESLint(代码规范插件) ​

运行(可以直接使用)：npm run lint(可以通过.eslintrc.cjs文件进行配置警告级别等)

下载插件(运行时提示)：npm i vite-plugin-selint

2.Prettier(代码格式化插件) ​

Prettier插件：WebStorm自带无需下载，VSCode需要下载

.prettierrc文件：可以规范项目代码，适用于多人协作

三、React模块与ReactDOM模块 ​

1.React模块 ​

作用：①核心功能 ②组件

2.ReactDOM模块 ​

作用：①操作浏览器DOM ②react-dom/client ③react-dom/server

第三部分 JSX语法 ​

一、JSX基本语法 ​

HTML转JSX网站：https://magic.reactjs.net/htmltojsx.htm

1.JSX简介 ​

JSX 是JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签

  1. JSX浏览器是不认识的，所以利用脚手架中的SWC或Babel进行编译，转换成浏览器识别的代码
  2. JSX 和 React 是相互独立的东西。但它们经常一起使用，但你可以单独使用它们中的任意一个，JSX 是一种语法扩展，而 React 则是一个JavaScript 的库

2.创建函数组件 ​

支持表达式写法与声明式写法两种写法

jsx
function App () {
  return (
    <div>Hello App</div>
  )
}
export default App  //将组件对外暴露
jsx
const App = () => {
  return (
    <div>Hello App</div>
  )
}
export default App  //将组件对外暴露

3.注意要点 ​

  1. JSX中原生HTML标签通常使用小写，自定义组件名通常使用大写开头，且标签必须闭合
  2. JSX中class为关键字，应该修改为className，label标签中，for应当改为htmlFor
  3. 属性应当使用小驼峰式命名(自定义属性除外)
  4. 可以在{}中书写JavaScript表达式、属性或注释，如：{ "foo".toUpperCase() }/{ /**/ }
  5. JSX中return语句中只能返回一个唯一根节点，若有多个节点，可以通过添加一个新的div元素或者Fragment组件(可以简写为&lt;&gt;，不会进行渲染)将多个节点包含
jsx
import { Fragment } from 'react'
function App () {
  return (
    <Fragment>
      <div>div1</div>
      <div>div2</div>
    </Fragment>
  )
}

二、JSX中使用样式 ​

1.行内样式 ​

jsx
{/*基本语法*/}
<div style={{width:"100px", height:"100px", backgroundColor:"blue"}}>this is a div</div>

{/*定义为变量使用*/}
const myStyle={width:"100px", height:"100px", backgroundColor:"red"}
<div style={myStyle}>this is a div</div>

2.全局样式 ​

全局样式在任何一个关联的地方引入之后，通过指定className全局有效

命名：Xxx.css

jsx
import 'Xxx.css'

function App () {
  return (
    <div className="box">box为Xxx.css文件中定义的样式</div>
  )
}

3.局部样式 ​

命名：Xxx.module.css

jsx
import &lt;styleName&gt; from 'Xxx.module.css'

function App () {
  return (
    <div className={&lt;styleName&gt;.box}>box为Xxx.module.css文件中定义的样式</div>
  )
}

使用局部样式时，若css中属性使用横线分割命名，如head-title-box，有两种解决方案

  1. 使用中括号，如下例
jsx
import &lt;styleName&gt; from 'Xxx.module.css'

function App () {
  return (
    <div className={&lt;styleName&gt;['head-title-box']}>使用横线分割命名的样式</div>
  )
}
  1. 使用Vite脚手架提供的将下划线分割命名转换为小驼峰命名的方式进行处理
jsx
export default defineConfig({
  plugins: [
    react()
  ],
  //添加代码，支持驼峰命名
  css: {
    modules:{
      localsConvention:'camelCase'
    }
  }
})
jsx
import &lt;styleName&gt; from 'Xxx.module.css'

function App () {
  return (
    <div className={&lt;styleName&gt;.headTitleBox}>使用横线分割命名的样式</div>
  )
}