react19 的项目创建和组件使用

1 创建react的项目

创建一个文件夹
使用vite创建react的项目
- 2-1. 创建js的项目(目前以这个为主) npm create vite@latest my-react-app -- --template react
- 2-2. 创建ts的项目 npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

2 认识项目中文件的作用

1. node_modules/

说明: 这个目录包含了项目所有的依赖包（通过 npm install 或 yarn install 或 pnpm install 安装）。
用途: 存放第三方库和工具的代码，例如 React、ReactDOM、Vite 本身以及其他你添加的库。
使用 : 你永远不应该直接修改这个目录里的任何文件。它是通过包管理器（npm/yarn/pnpm）自动管理的。这个目录通常很大，并且应该被添加到 .gitignore 中，不提交到版本控制系统（如 Git）。

2. public/

说明: 存放静态资源的目录。
用途:
放置那些不需要经过 Vite 构建处理，并且需要保持其原始文件名和路径的资源。例如 favicon.ico, robots.txt, 或者某些必须在特定路径下才能工作的第三方脚本/资源。 - 这些文件在构建时会被直接复制到最终输出目录（默认为 dist）的根目录下。
使用: 将不需要打包、需要直接访问的静态文件放在这里。例如，如果你在 index.html 中直接引用，那么 favicon.ico 就应该放在 public 目录下。
注意: 引用 public 目录下的资源时，要使用绝对路径（从根 / 开始）。

3. src/

说明 : 项目的源代码目录，包含了你应用的主要逻辑和组件。
用途: 这是你花费大部分时间编写代码的地方，包含 React 组件、样式、工具函数、图片资源等。
使用: 组织你的应用代码。Vite 会处理这个目录下的所有文件（JS/TS/JSX/TSX/CSS/图片等），进行编译、转换、优化和打包。

4. src/assets/

说明 : src 目录下的一个子目录，通常用来存放会被 JavaScript 或 CSS 引用的静态资源。
用途: 存放图片、字体、SVG 等需要被组件或样式表导入使用的资源。
使用: 当你在 JS/JSX 或 CSS 文件中 import 这个目录下的资源时（例如 import logo from './assets/react.svg'），Vite 会处理这些资源：
- 小的资源可能会被内联（inline）为 Base64 Data URL。
- 大的资源会被复制到输出目录，并自动生成带哈希值的文件名以利用浏览器缓存。Vite 会自动处理正确的引用路径。
与 public/ 的区别: src/assets 下的资源是项目源码的一部分，会被 Vite 构建系统处理和优化；public/ 下的资源则直接复制，不参与构建优化。

5. src/App.css

说明: 示例的 CSS 文件，用于 App.jsx 组件的样式。
用途: 定义特定于 App 组件的样式规则。
使用: 你可以修改它来改变 App 组件的外观，或者采用其他样式方案（如 CSS Modules, Styled Components, Tailwind CSS 等）并可能删除或替换这个文件。

6. src/App.jsx (或 App.tsx for TypeScript)

说明: 项目的根 React 组件。
用途: 这是你应用的起点 UI 结构。它通常包含了主要的布局、路由（如果使用 React Router）以及其他顶层组件。
使用: 这是你开始构建应用界面的主要文件之一。你会在这里添加内容、引入子组件、管理状态等。

7. src/index.css

说明: 全局 CSS 文件。
用途: 定义全局样式、CSS 变量、引入 CSS Reset 或基础样式库（如 normalize.css）。这些样式会影响整个应用程序。
使用: 在 main.jsx 中被导入，通常用来设置基础的 HTML 元素样式、字体、背景色等。

8. src/main.jsx (或 main.tsx for TypeScript)

说明 : 应用程序的入口文件。
用途:
- 导入核心库（React, ReactDOM）。
- 导入根组件（App）。
- 导入全局样式（index.css）。
- 使用 ReactDOM.createRoot().render() 将 React 应用挂载到 index.html 中的 DOM 节点（通常是 <div id="root"></div>）。
使用: 通常这个文件修改不多，主要用于初始化设置，例如集成路由库（React Router）、状态管理库（Redux, Zustand）的 Provider，或者设置全局上下文。

9. .eslintrc.cjs (或 .eslintrc.json, .js, .yaml 等)

说明: ESLint 的配置文件。ESLint 是一个代码检查工具，用于发现代码中的问题并强制执行编码规范。.cjs 扩展名表示它是一个 CommonJS 模块（在 package.json 中 type: "module" 时常用）。
用途: 配置 ESLint 的规则、插件和解析器选项，以确保代码质量和风格一致性。
使用: 根据团队规范或个人偏好修改规则。例如，启用/禁用特定规则，集成 Prettier 等。

10. .gitignore

说明: Git 的忽略配置文件。
用途: 告诉 Git 哪些文件或目录不应该被追踪和提交到版本库。
使用: 默认包含了 node_modules, 构建输出目录 (/dist), 环境变量文件 (.env* 但排除 .env.example), 以及一些操作系统或编辑器产生的临时文件。你可以根据需要添加其他要忽略的文件或目录。

11. index.html

说明 : 应用的主 HTML 文件。与传统项目不同，在 Vite 中，这个文件位于项目根目录，而不是 public 目录。
用途:
- 作为开发服务器的入口点。
- 提供 React 应用挂载的根 DOM 节点（通常是 <div id="root">）。
- 包含指向 src/main.jsx 的 <script type="module"> 标签，Vite 会处理这个入口脚本。
使用 : 你可以在这里修改 <title>, 添加 <meta> 标签，引入不在 src 中处理的外部 CSS 或 JS 文件（虽然通常推荐在 src 中管理）。Vite 在构建时会自动处理脚本和样式链接的注入。

12. package.json

说明 : Node.js 项目的清单文件。
用途:
- 记录项目名称、版本、描述等元数据。
- 列出项目的依赖 (dependencies) 和开发依赖 (devDependencies)。
- 定义可执行的脚本 (scripts)，如 dev (启动开发服务器), build (构建生产版本), lint (运行代码检查), preview (预览生产构建)。
使用:
- 通过 npm install <package> 或 npm install --save-dev <package> 添加依赖时，这个文件会自动更新。
- 修改 scripts 来自定义命令。
- 是项目共享和协作的基础。

13. `package-lock.json (或 yarn.lock, pnpm-lock.yaml)`

说明: 依赖版本锁定文件。
用途: 精确记录 node_modules 目录下每个依赖及其子依赖的确切安装版本和下载地址。这确保了在不同环境（例如，你的电脑和同事的电脑，或 CI/CD 服务器）下 npm install 时能安装完全相同的依赖版本，避免"在我机器上能跑"的问题。
使用 : 这个文件由包管理器自动生成和更新 ，你不应该手动编辑它。务必将此文件提交到 Git。

14. README.md

说明: 项目的说明文档文件，使用 Markdown 格式编写。
用途: 提供关于项目的信息，例如：项目是做什么的、如何安装依赖、如何运行开发服务器、如何构建项目、项目结构说明、贡献指南等。
使用 : 强烈建议根据你的项目情况详细编写和维护这个文件，方便自己和他人理解和使用项目。

15. vite.config.js (或 vite.config.ts for TypeScript)

说明: Vite 的配置文件。
用途: 自定义 Vite 的行为。你可以配置插件（例如 React 插件 @vitejs/plugin-react 已经默认配置好）、开发服务器选项（端口、代理）、构建选项（输出目录、代码分割）、路径别名等。
使用: 当你需要调整 Vite 的默认设置或添加高级功能时，修改这个文件。例如，配置反向代理来解决开发时的跨域问题，或者添加自定义插件。

3. 创建自己的react的项目

在src文件夹中除了App.jsx 和 main.jsx 其他的都删除
我们要删除App.jsx文件中第3行代码，因为我们已经把文件都删除了

App.jsx 的代码

js 复制代码

function App() {
  return (
    <div>
      Hello world
    </div>
  );
}

export default App;

运行 npm run dev

4. react的组件

react中组件分为函数组件 和类组件。但是目前都是函数组件为主流，我们以后只学习函数组件

我们界面的显示都要在组件中，然后导出。学习函数组件必须知道jsx的语法

我们来详细讲解 React 函数组件中 JSX 的语法。

JSX 简介

JSX (JavaScript XML) 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的结构。React 使用 JSX 来描述 UI 组件的结构和外观，这使得代码更具可读性，并且直观地反映了最终渲染的 DOM 结构。

重要提示： 浏览器本身不理解 JSX。你需要一个构建工具（如 Vite 或 Create React App 中集成的 Babel）将 JSX 代码转换为常规的 JavaScript 函数调用（主要是 React.createElement()），浏览器才能执行。

在函数组件中使用 JSX

函数组件的核心任务就是返回一段描述 UI 的 JSX。

js 复制代码

// 一个简单的函数组件返回 JSX
function MyComponent() {
  // return 语句后面跟着 JSX 代码
  return (
    <div> {/* JSX 看起来像 HTML */}
      <h1>Hello from MyComponent!</h1>
      <p>This is a paragraph inside the component.</p>
    </div>
  );
}

export default MyComponent;

JSX 语法要点

必须有一个根元素:

一个组件返回的 JSX 必须被包裹在单个根元素中。你不能直接返回多个并列的元素。

错误示例:

js 复制代码

// 错误！不能返回两个并列的顶级元素
// return (
//   <h1>Title</h1>
//   <p>Text</p>
// );

正确做法: 使用 <div>、<section> 等 HTML 元素包裹，或者使用 React.Fragment 或其简写语法 <>。Fragment 不会在最终的 DOM 中添加额外的节点。

js 复制代码

// 正确：使用 div 包裹
return (
  <div>
    <h1>Title</h1>
    <p>Text</p>
  </div>
);

// 正确：使用 React.Fragment
return (
  <React.Fragment>
    <h1>Title</h1>
    <p>Text</p>
  </React.Fragment>
);

// 正确：使用 Fragment 简写语法 <>
return (
  <>
    <h1>Title</h1>
    <p>Text</p>
  </>
);

嵌入 JavaScript 表达式:

你可以在 JSX 中使用花括号 {} 来嵌入任何有效的 JavaScript 表达式。
表达式可以是变量、函数调用、算术运算、三元运算符等。
注意： 不能直接在 {} 中放入 JavaScript 语句（如 if/else、for 循环、switch）。对于条件渲染或列表渲染，需要使用 JavaScript 的技巧（见下文）。

js 复制代码

  function UserProfile(props) {
  const { name, age, isLoggedIn } = props;
  const currentYear = new Date().getFullYear();

  return (
    <div>
      {/* 嵌入变量 */}
      <h2>User: {name}</h2>

      {/* 嵌入算术运算 */}
      <p>Born around: {currentYear - age}</p>

      {/* 嵌入函数调用 */}
      <p>Status: {isLoggedIn ? 'Logged In' : 'Logged Out'}</p>

      {/* 嵌入三元运算符进行条件渲染 */}
      {age >= 18 ? <p>Adult</p> : <p>Minor</p>}
    </div>
  );
}

属性 (Attributes):
- JSX 属性的写法非常类似于 HTML 属性。
- 字符串字面量: 使用双引号 "" 或单引号 ''。
  js 复制代码
```
      <img src="/logo.png" alt="Company Logo" />
    
```
- JavaScript 表达式: 使用花括号 {} 嵌入变量、布尔值、数字等。
  js 复制代码
```
const logoUrl = "/logo.png";
const altText = "Company Logo";
const isDisabled = true;

<img src={logoUrl} alt={altText} />
<button disabled={isDisabled}>Submit</button> // disabled={true} 会渲染为 disabled 属性
// <button disabled={false}>Submit</button> // disabled={false} 不会渲染 disabled 属性
    
```
- 命名约定:
  - 大多数 HTML 属性名在 JSX 中保持不变。
  - 由于 class 和 for 是 JavaScript 的保留关键字，所以它们在 JSX 中需要写成 className 和 htmlFor。
    js 复制代码
```
<div className="container">Styled Div</div>
<label htmlFor="emailInput">Email:</label>
<input type="email" id="emailInput" />
    
```
  - 属性名通常使用驼峰命名法 (camelCase) ，特别是对于非标准属性或自定义属性（尽管 HTML 标准属性通常保持小写）。例如，SVG 属性如 strokeWidth。

样式 (Styling):

className (推荐): 最常用的方式是使用 className 属性引用外部 CSS 文件或 CSS Modules 中定义的类。
js 复制代码
```
// 在 CSS 文件中: .my-button { color: blue; }
// 在 JSX 中:
<button className="my-button">Styled Button</button>
    
```

内联样式 style: style 属性接受一个 JavaScript 对象，而不是 CSS 字符串。对象的键是样式属性的驼峰命名版本 (e.g., backgroundColor 而不是 background-color)，值是样式值（通常是字符串，数字会被自动加上 px，除非是无单位属性）。

js 复制代码

const buttonStyle = {
  color: 'white',
  backgroundColor: 'green', // 注意驼峰命名
  padding: '10px 20px', // 字符串值
  border: 'none',
  borderRadius: 5 // 数字值，通常会转为 '5px'
};

<button style={buttonStyle}>Inline Styled Button</button>

// 或者直接写对象字面量 (注意双花括号：外层表示嵌入 JS 表达式，内层是样式对象)
<p style={{ fontSize: '16px', marginTop: 10 }}>Some text</p>

事件处理:

事件名称使用驼峰命名法 (e.g., onClick, onChange, onSubmit)。
事件处理函数直接通过 {} 传递一个函数引用。
不要在 JSX 中直接调用函数（除非你想在渲染时立即执行），而是传递函数本身。

js 复制代码

  function ClickCounter() {
  const [count, setCount] = React.useState(0);

  // 定义事件处理函数
  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
    console.log('Button clicked!');
  };

  return (
    <div>
      <p>Count: {count}</p>
      {/* 传递函数引用 */}
      <button onClick={handleClick}>Click Me</button>

      {/* 或者使用内联箭头函数 */}
      <button onClick={() => console.log('Inline handler clicked!')}>
        Click Me (Inline)
      </button>
    </div>
  );
}

注释:

在 JSX 的标签内部或子元素位置添加注释，需要用 {/* ... */} 包裹。

js 复制代码

  function CommentExample() {
  return (
    <div>
      {/* 这是一个 JSX 注释 */}
      <h1>Title</h1>
      <p>
        Some text {/* 可以在行内 */} here.
      </p>
    </div>
  );
}

自闭合标签:
- 对于没有子元素的标签（如 <img>, <input>, <br> 或自定义组件），必须使用 / 来闭合标签。
- <img src="image.jpg" alt="description" />
- <input type="text" />
- <MyCustomComponent prop1="value" />

渲染自定义组件:

导入你的自定义组件。
在 JSX 中像使用 HTML 标签一样使用它，但首字母必须大写。
通过属性 (props) 向子组件传递数据。

js 复制代码

import UserProfile from './UserProfile'; // 导入自定义组件

function App() {
  const userInfo = { name: "Charlie", age: 25, isLoggedIn: true };

  return (
    <div>
      <h1>My App</h1>
      {/* 使用自定义组件，并传递 props */}
      <UserProfile name={userInfo.name} age={userInfo.age} isLoggedIn={userInfo.isLoggedIn} />
      {/* 也可以使用扩展运算符传递对象 */}
      {/* <UserProfile {...userInfo} /> */}
    </div>
  );
}

在react项目中使用快捷键

触发词	自动生成的代码	用途说明
`rafce`	`React Arrow Function Component Export`	创建一个箭头函数组件（含默认导出）✅ 推荐
`rfc`	`React Function Component`	创建一个普通函数组件（不含箭头函数）
`usf`	`useState` 语句	快速引入 `useState`
`uef`	`useEffect` 语句	快速引入 `useEffect`
`imr`	`import React from 'react'`	引入 React
`impt`	`import PropTypes from 'prop-types'`	引入 PropTypes
`clg`	`console.log()`	快速输出日志
`nfn`	`const name = () => {}`	创建箭头函数（通用）
`redux`	`mapStateToProps` + `mapDispatchToProps` 模板	Redux 的连接模板
`hoc`	`Higher Order Component` 模板	创建高阶组件

问题usf和uef可能不能使用，这时你需要手动配置

打开用户代码片段配置:

按下 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac) 打开命令面板。
输入 Snippets，然后选择 "Configure User Snippets" (配置用户代码片段)。
此时，VS Code 会让你选择一个语言或创建一个新的全局片段文件。
- 选项 A (推荐): 为 React 文件指定语言
  - 在列表中输入 javascriptreact 并选择 javascriptreact.json。
  - 同样地，如果你使用 TypeScript，也为 typescriptreact 创建或编辑 typescriptreact.json。将片段添加到这两个文件中可以确保它们在对应的 React 文件中都能工作。

将下面的代码直接

js 复制代码

{
	// Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"React useState Hook": {
    // "scope": "javascript,javascriptreact,typescript,typescriptreact", // 如果是全局文件，取消此行注释并按需调整
    "prefix": "usf", // 触发前缀
    "body": [
      // 核心改动在这里：set${1/(.*)/${1:/capitalize}/}
      "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialValue});",
      "$0" // 最终光标位置
    ],
    "description": "Creates a React useState Hook (e.g., [count, setCount])"
  },
  // 如果还有其他片段，在这里加逗号

  // ... (接下来添加 uef 片段) ...
	"React useEffect Hook": {
    "prefix": "uef",
    "body": [
      "useEffect(() => {",
      "\t${1:// Effect logic here}", // 第一个 Tab Stop，带注释占位符，\t 代表一个 Tab 缩进
      "", // 空行，可选
      "\treturn () => {", // 清理函数
      "\t\t${2:// Cleanup logic here}", // 第二个 Tab Stop，在清理函数内部
      "\t};",
      "}, [${3:dependencies}]);", // 第三个 Tab Stop，用于依赖项数组，带占位符
      "$0" // 最终光标位置
    ],
    "description": "Creates a React useEffect Hook (with cleanup function and dependencies)"
  }
}

react19 的项目创建和组件使用

1 创建react的项目

2 认识项目中文件的作用

1. node_modules/

2. public/

3. src/

4. src/assets/

5. src/App.css

6. src/App.jsx (或 App.tsx for TypeScript)

7. src/index.css

8. src/main.jsx (或 main.tsx for TypeScript)

9. .eslintrc.cjs (或 .eslintrc.json, .js, .yaml 等)

10. .gitignore

11. index.html

12. package.json

13. package-lock.json (或 yarn.lock, pnpm-lock.yaml)

14. README.md

15. vite.config.js (或 vite.config.ts for TypeScript)

3. 创建自己的react的项目

4. react的组件

在react项目中使用快捷键

问题usf和uef可能不能使用，这时你需要手动配置

13. `package-lock.json (或 yarn.lock, pnpm-lock.yaml)`