从0到1 学习 react

用户51682365593
26 阅读3分钟

这是一个充满勇气的选择！React 是目前全球范围内就业市场最广阔、生态最成熟的前端库（由 Facebook/Meta 维护）。

比起 Vue 的“自动挡”（很多东西框架帮你做了），React 更像是“手动挡”赛车——它给你极高的自由度，但要求你对 JavaScript 的理解更纯粹。

核心思想只有一句话：All in JS（一切皆 JS）。

第一步：创建你的 React 工程

现在我们需要一个专门为 React 优化的环境。请打开终端（Terminal），退出当前项目（Ctrl+C），回到上一级目录，然后：

  1. 创建项目：

    Bash

    npm create vite@latest my-react-app
    • Select a framework: React
    • Select a variant: JavaScript (先暂时不用 TypeScript，减少干扰)

  2. 启动：

    Bash

    cd my-react-app
npm install
npm run dev

打开浏览器链接，你会看到 React 的旋转图标。

第二步：解剖 React —— 什么是 JSX？

打开项目里的 src/App.jsx 文件。

你会看到一段看起来很像 HTML，但又混在 JS 里的代码。这就是 JSX (JavaScript XML) 。

⚠️ React 的三条铁律（死记硬背）

  1. 函数即组件： React 组件本质上就是一个首字母大写的函数，它返回 UI 结构。
  2. 只能有一个根节点： return 出来的最外层必须包在一个 <div> 或 <> (空标签) 里。
  3. 用 {} 包裹变量： 在 HTML 里想写 JS（比如变量、计算），必须用花括号包起来。

第三步：动手改写 (清理现场)

为了不被默认代码干扰，请把 src/App.jsx 的内容全部删掉，替换成下面这一段最简代码：

JavaScript

// App.jsx
// 1. 这是一个组件 (函数名首字母大写)
function App() {
  
  const name = "React 新手";
  const score = 99;

  // 2. 返回 JSX (看起来像 HTML)
  return (
    <div className="container">
      {/* 3. 使用变量要用花括号 */}
      <h1>你好，{name}！</h1>
      <p>你的分数是：{score + 1}</p>
      
      <button>点我没反应</button>
    </div>
  );
}

// 4. 导出给 index.js 使用
export default App;

观察浏览器： 你应该能看到文字和分数（100）。

注意： 在 React 里，HTML 的 class 属性要写成 className（因为 class 是 JS 的保留字）。

第四步：组件化 (搭积木)

React 的精髓在于把页面拆成小块。我们来新建一个组件。

  1. 在 src 下新建文件 MyButton.jsx。
  2. 写入代码：

JavaScript

// MyButton.jsx
function MyButton() {
  return (
    <button style={{ backgroundColor: 'blue', color: 'white' }}>
      我是独立的按钮组件
    </button>
  );
}

export default MyButton;
  1. 回到 App.jsx，像引用 HTML 标签一样使用它：

JavaScript

// 先导入
import MyButton from "./MyButton";

function App() {
  return (
    <div>
      <h1>主页面</h1>
      {/* 使用组件 */}
      <MyButton />
      <MyButton />
    </div>
  );
}
export default App;

你看，组件可以复用！这就好比你定义了一个“乐高积木”，然后想插哪里插哪里。

第五步：React 的灵魂 —— useState

这是 React 最大的难点，也是最迷人的地方。

在原生 JS 里，你修改变量 count = 100，界面不会自动变。你需要手动去找 DOM 修改。

在 React 里，我们通过修改状态 (State) 来驱动界面自动更新。

钩子 (Hook): useState

请把 App.jsx 改成这样，体验一下“数据驱动视图”：

JavaScript

import { useState } from 'react'; // 1. 引入钩子

function App() {
  // 2. 定义状态
  // count: 当前的值
  // setCount: 专门用来修改 count 的函数 (必须用它改，不能直接改 count)
  // useState(0): 初始值是 0
  const [count, setCount] = useState(0);

  // 定义一个点击处理函数
  function handleClick() {
    // 告诉 React：请把 count 变成原来的值 + 1，并重新渲染页面
    setCount(count + 1);
  }

  return (
    <div>
      <h1>当前计数：{count}</h1>
      {/* 3. 绑定事件 (注意 onClick 驼峰写法) */}
      <button onClick={handleClick}>
        点击 +1
      </button>
    </div>
  );
}

export default App;

尝试点击按钮：

数字在变！你没有写任何 document.getElementById，也没有手动修改 DOM 文字。你只是修改了数据 (count)，React 自动帮你画出了新的界面。

💡 React 新手第一关挑战

为了确认你掌握了 useState 和组件，请完成下面这个小任务：

做一个“点赞”按钮

  1. 创建一个组件。

  2. 里面有一个状态 isLiked (布尔值，初始为 false)。

  3. 显示一个按钮。

    • 如果 isLiked 是 true，按钮文字显示 "已赞 ❤️"，背景色变粉色。
    • 如果 isLiked 是 false，按钮文字显示 "点赞 🤍"，背景色灰色。

  4. 点击按钮，切换状态（从 true 变 false，从 false 变 true）。

提示：

  • 切换状态逻辑：setIsLiked(!isLiked) (取反)
  • 三元运算符 (JS 里的 if/else 简写)：{ isLiked ? "已赞" : "点赞" }
avatar
文章
阅读
粉丝