【React】React初体验--手把手教你写一个自己的React初始项目

在创建使用React或Vue需要先安装配置Node.js

Node.js下载安装及环境配置

创建React项目

React 开发环境准备

使用 React 编码，我们有两种方式：

1. ❌（不推荐）使用 <script> 标签引入 .js 文件来使用 React。

这是比较古老的编码方式------如果我们的项目比较大，我们会对项目的 JS 文件进行拆分，然后页面上就需要通过 <script> 标签加载很多拆分出来的 JS 文件。这样的话，页面性能会很低，可维护性也很差。

2. ✔️（推荐）使用"脚手架"工具来编码。

脚手架 实质上是前端开发过程中的一个辅助工具，它会自动帮我们构建一个大型项目的开发流程和目录。它允许我们以一定的方式去实现 JS 文件的相互引用，让我们更方便的对项目进行管理。

但是，我们在脚手架 里边写的代码实际上并不能直接运行 。我们需要脚手架工具 帮我们做代码的编译，编译出来的代码才可以被浏览器识别、运行。

在学习阶段我们主要是使用到Create-react-app或者vite协助我们进行React框架的构建，以下是两个框架的安装使用代码

Create-react-app -- Create-react-app官方文档

npx create-react-app '你的项目名'

按照提示，依次输入命令行。脚手架工具会自动给我们打开 localhost:3000 的网页，这也表示创建项目开发目录成功：

cd '你的项目名'
npm start

目前官方也已经不推荐并逐渐废弃Create-react-app作为新项目的构建方法。

接下来的学习生活我们也都将使用vite工具构建React框架实现更好的代码体验

Vite -- Vite 官方文档

# 第一种方法
npm create vite@latest

# 第二种方法快速构建
# npm 7+，需要添加额外的 --：
npm create vite@latest '你的项目名' -- --template '你需要的框架，例如：react'

# 创建Vue范例
npm create vite@latest my-vue-app -- --template vue

更多Vite搭建React相关知识请戳

React相关语法和特性使用

JSX语法

JSX允许我们在JS代码中直接书写HTML标签结构，做到了同一个文件完成逻辑和页面的实现

在HTML中植入JS需要使用花括号{}

代码示例：

function App () {

  const name = 'FWB' // 定义变量
  const songs = [
    { id: 1, name: '爱我的时候' },
    { id: 2, name: '永不失联的爱' },
    { id: 3, name: '我管不住我自己' },
    { id: 4, name: '珠玉' },
    { id: 5, name: '一个人跳舞' },
  ]
  
  return (
    <div className="App">
      <h1>你好 {name}！</h1> 
      <ul>
        {
          songs.map(item => {
            return <li key={item.id}>{item.id + 1}.{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}

🧩 组件与组件通信

React 的核心思想是 组件化开发。组件就像乐高积木，每个模块独立存在，但组合起来就能搭出复杂的城堡 🏰。

🎯 组件的定义

React 组件有两种：函数组件 （推荐）和类组件（逐渐淘汰）。函数组件就像"快餐店"------快速、简洁、好消化；类组件则像"米其林餐厅"------功能强大但操作复杂 😄。

// 函数组件示例（推荐）
function Welcome(props) {
  return <h1>你好，{props.name}</h1>;
}

💡 注意事项：

• 性能优化：函数组件更轻量，适合简单场景。就像穿运动鞋打篮球，效率更高 👟🏀。

---

📦 父传子通信

父组件传递数据给子组件，就像快递员送包裹：props 是包裹，子组件是收件人 📦📦。

// 父组件
function ParentComponent() {
  const message = "来自父组件的消息";
  return <ChildComponent message={message} />;
}

// 子组件
function ChildComponent({ message }) {
  return <p>{message}</p>;
}

⚠️ 注意事项：

• 避免深层嵌套 ：如果包裹需要层层传递，考虑用 Context API 或 Redux，就像快递直达收件人，省去中转站 😅。

---

📨 子传父通信

子组件想给父组件发消息？用回调函数当"传话筒"！

// 父组件
function ParentComponent() {
  const handleChildData = (data) => {
    console.log("收到子组件的数据：", data);
  };
  return <ChildComponent onSendData={handleChildData} />;
}

// 子组件
function ChildComponent({ onSendData }) {
  const sendDataToParent = () => {
    onSendData("这是来自子组件的数据");
  };
  return <button onClick={sendDataToParent}>发送数据给父组件</button>;
}

💡 注意事项：

• 避免过度耦合：回调函数就像"一次性传话筒"，别让它变成永久电话线 📞。

---

🔄 状态管理（State）

状态管理是 React 的"心脏"，控制组件的动态变化。

💧 使用 useState

useState 就像水龙头：打开（更新状态）就出水，关闭（不更新）就静止。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

⚠️ 注意事项：

• 异步更新：状态更新可能延迟，就像等烧水壶沸腾需要时间 🚰。
• 函数式更新 ：用 setCount(prev => prev + 1) 能确保拿到最新值，避免"看错表" 😅。

---

🤖 使用 useReducer

对于复杂状态逻辑，useReducer 像是"机器人指挥官"，按规则执行任务。

const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

💡 注意事项：

• 保持简洁：别让 reducer 变成"万能公式"，复杂逻辑拆分到多个 reducer 中 🧱。

---

⏳ 生命周期与副作用（useEffect）

useEffect 是 React 的定时器+闹钟+清洁工三合一工具！

🕒 基本用法

useEffect 负责组件挂载、更新、卸载时的后台任务，比如加载数据或监听事件。

import React, { useEffect, useState } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(res => res.json())
      .then(json => setData(json));
  }, []); // 空数组 = 只执行一次

  return (
    <div>
      {data ? <p>获取到的数据：{data.title}</p> : <p>加载中...</p>}
    </div>
  );
}

⚠️ 注意事项：

• 空数组 ≠ 安全：如果依赖项缺失，可能会导致"定时炸弹"------状态更新失效 💣。

---

🧹 清理副作用

useEffect 返回的函数就像"清洁工"，组件卸载时自动打扫战场。

useEffect(() => {
  const handleResize = () => {
    console.log('窗口大小变化：', window.innerWidth);
  };
  window.addEventListener('resize', handleResize);
  return () => {
    window.removeEventListener('resize', handleResize); // 清理！
  };
}, []);

⚠️ 注意事项：

• 内存泄漏警告：忘记清理事件监听器？就像关不掉的灯泡，最终会烧掉你的电脑 💡🔥！

---

🌈 样式引入方式

React 的样式引入方式有三种：行内样式、外部 CSS、CSS Modules。

💄 行内样式

像化妆一样直接给元素"上色"。

const divStyle = { color: 'blue', fontSize: '20px' };
function HelloWorld() {
  return <div style={divStyle}>Hello World</div>;
}

⚠️ 注意事项：

• 可维护性差：样式和逻辑混在一起，就像把菜谱和调料直接混在锅里 😅。

---

🎨 外部 CSS 文件

创建 App.css 文件，像给组件穿衣服。

/* App.css */
.title {
  color: red;
  font-size: 24px;
}

💡 注意事项：

• 命名冲突风险：如果多个组件用了相同类名，就像多人穿同款衣服，容易撞衫 👕。

---

🧩 CSS Modules 🧩 CSS 模块

CSS Modules 是"私人定制"的衣服，只属于当前组件，避免撞衫。

import styles from './App.module.css';
function App() {
  return <h1 className={styles.title}>Hello React</h1>;
}

💡 注意事项：

• 文件命名规则 ：记得用 .module.css 后缀，否则工具不会识别 😅。

---

🚀 路由（React Router）

react-router-dom 是 React 的"导航系统"，帮你管理不同页面之间的跳转。

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

⚠️ 注意事项：

• 版本差异：React Router v6 与 v5 差异较大，升级前务必看文档 📚。

---

🎉 最后的小贴士： 以上所有的知识点后续我们都会进行解决大家不要害怕。

技术学习就像练武功，多写代码 是"内功心法"，查阅文档是"招式秘籍"。遇到问题时，先看官方文档，再翻社区文章，最后才问"度娘" 😄