React基础使用（一）

2025-07-08•

•📚 React

React 安装

使用 create-react-app

npm i -g create-react-app
#全局安装create-react-app
 
...
#进入创建项目的目录,略
 
create-react-app YOUR_PROJECT
#创建名为“YOUR_PROJECT”的项目

使用 Vite 创建 react 脚手架

#Vite 需要 Node.js 版本 18+，20+。
 
npm create vite@latest
? Project name: » vite-project
#项目名称
? Select a framework: » - Use arrow-keys. Return to submit.
 ...
    Vue
>   React
    Preact
    ...
#选择框架
? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
#选择需要的配置，SWC是将ES6语法转换为ES5语法的工具

React 概览

组件的创建与嵌套

React 应用程序是由组件组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。

相比于 Vue，React 的组件更偏向于纯粹的 JS ，React 组件是返回标签的 JavaScript 函数

import "./style.css";
 
//可以引入样式
 
function MyButton() {
    //一些其他逻辑
    return <button>I'm a button</button>;
}

像这样，一个函数组件内部包含自己的样式，逻辑，返回一个标签

React 组件可以进行嵌套：

import MyButton from "目录";
 
export default function MyApp() {
    //注意：必须将组件暴露出去，才可以在其他文件中导入该组件
    return (
        <div>
            <h1>My React App</h1>
            <MyButton />
        </div>
    );
}

React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。

JSX

React 使用JSX 来替代常规的JavaScript

JSX 比 HTML 更加严格。你必须闭合标签，如 <br />。

组件不能返回多个 JSX 标签,必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的 <>...</> 包裹：

function ExampleComponent() {
    return (
        <>
            <h1>Title</h1>
            <p>Something</p>
        </>
    );
}

添加样式

在 React 中，为标签添加 CSS 的 class 需要使用 className ，其与 HTML 的 class 属性的工作方式相同

<img className="avatar" />

显示数据

在 JSX 中，函数组件最终会 return 一个标签，而如果想在标签内部嵌入 JS 代码，需要使用到大括号：{}

return <h1>{user.name}</h1>;

在标签上同样可以使用大括号将 JSX 属性转移到 JavaScript

return <img className="avatar" src={user.imageUrl} />;

只要在大括号之内，就可以转义为 JavaScript 代码，从而更加灵活地实现代码逻辑

一个误区： 在某些时候，我们使用这种语法时会将某个对象转义为 JavaScript 代码

<li
  key={product.id}
  style={{
    color: product.isFruit ? 'magenta' : 'darkgreen'
  }}
>

这样的语法并不是双大括号，而是在大括号内蕴含一个对象

条件渲染

React 没有特殊的语法来编写条件语句，因此使用的就是普通的 JavaScript 代码。

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return <div>{content}</div>;

例如 if 语句，三目运算符，甚至利用逻辑短路

渲染列表

假设有一个产品数组：

const products = [
    { title: "Cabbage", id: 1 },
    { title: "Garlic", id: 2 },
    { title: "Apple", id: 3 },
];

可以借助 map 函数来渲染对应列表标签

const listItems = products.map((product) => (
  <li key={product.id}>{product.title}</li>
));
 
return <ul>{listItems}</ul>;

对于列表渲染，常常需要使用到 key

对于列表中的每一个元素，都应该传递一个字符串或者数字给 key，用于在其兄弟节点中唯一标识该元素。

响应事件

可以在组件中声明事件处理函数来响应事件

function MyButton() {
    function handleClick() {
        alert("You clicked me!");
    }
 
    return <button onClick={handleClick}>Click me</button>;
}

响应式

在 React 中，使用 state 来进行某些属性的记录与更新

import { useState } from "react";
 
//首先，从 React 引入 useState：
 
function MyButton() {
    const [count, setCount] = useState(0);
    //声明一个state变量
 
    function handleClick() {
        setCount(count + 1);
    }
    //事件处理函数
 
    return <button onClick={handleClick}>Clicked {count} times</button>;
}

我们将从 useState 中获得两样东西：当前的 state（count），以及用于更新它的函数（setCount）。

在这一步，给 onClick 传递的是一个回调函数，在合适时间会被调用

如果需要给函数传参，需要将其修改：

<button
    onClick={() => {
        handleClick(123);
    }}
>
    Clicked {count} times
</button>

实际上，以 use 开头的函数被称为 Hook。useState 就是 React 提供的一个内置 Hook 。