type
Post
status
Published
date
slug
reactnote
summary
React 主要用来做网页里的“界面部分”。它关注的是：用户看到什么、点击之后界面怎么变化、数据变化后页面怎么。
tags
React
笔记
category
前端开发
icon
password
类型
日期
标签
概述
状态
构建用户界面的库
React 主要用来做网页里的“界面部分”。它关注的是：用户看到什么、点击之后界面怎么变化、数据变化后页面怎么。一个页面里面通常有：
导航栏
用户头像
文章列表
按钮
输入框
弹窗
这些都属于用户界面。React 的作用就是帮你更方便地组织、更新和维护这些界面。
页面由组件构成
React 的核心思想是：把页面拆成一个个组件。例如一个面可以拆成：
每个组件负责页面上的一小块内容。
组件通常就是一个 JavaScript 函数，返回一段 JSX：
然后可以像使用 HTML 标签一样使用它：
组件的好处是：结构清楚、可以复用、方便维护。
数据变化后，React 自动更新界面
普通 HTML/JS 里，如果数据变了，你经常要自己手动操作 DOM：
而对于 React， 数据一变，React 会自动重新计算并更新需要变化的部分。
这里 count 变化后，按钮里的数字会自动更新。不用手动找按钮，也不用手动改文字。
React 项目通常不是单个 HTML 文件，而是一个应用结构
刚学 HTML/CSS/JS 时，常见结构可能是：
但 React 项目通常是一个完整应用结构，例如 Vite 创建出来的项目：
真正主要写代码的地方通常在 src 文件夹里。index.html 依旧存在，但它通常只提供一个挂载点：
React 会把整个应用渲染到这个 root 里面。
Vite 创建 React 项目
Vite 是一个前端构建工具。你可以把它理解成：帮你快速创建、运行、打包 React 项目的工具。
常用命令：
main.jsx 是入口文件
main.jsx 是 React 应用的入口。它的作用是：把 React 应用挂载到 HTML 页面里的 root 节点。
App.jsx 是主组件
App.jsx 通常是项目的主组件。它就像整个页面的“总入口组件”，其他组件通常会被放到 App 里面。
组件
组件就是 React 里构建页面的基本单位。最常见的是函数组件：
使用组件：
组件名必须首字母大写，小写会被 React 当成普通 HTML 标签。
JSX
JSX 是 JavaScript 的语法扩展。它让你可以在 JavaScript 里写类似 HTML 的代码。
它看起来像 HTML，但本质上会被工具转换成 JavaScript。JSX 里可以插入 JavaScript 表达式，用 {}：
常见规则：
- class 要写成 className：
- 只能返回一个最外层元素：
- 事件写成驼峰形式
总结
Vite：创建和运行 React 项目的工具
index.html：提供 root 容器
main.jsx：React 应用入口，把 App 挂载到 root
App.jsx：主组件，组织页面内容
组件：页面的一块一块 UI
JSX：在 JavaScript 里写界面的语法
数据变化：React 自动更新界面
- Author:Uonlra
- URL:https://www.uonlra.blog//article/reactnote
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
