新手入门 React .tsx 项目：从零到实战

news2025/1/9 5:20:56

🚀 新手入门 React .tsx 项目：从零到实战 💻✨

如果你是 React 新手，刚接触 .tsx 文件，不要担心！跟着这份指南，一步一步来，你很快就能上手了！👇

📚 1. 基础知识准备

在开始 React .tsx 项目之前，先确保你对以下内容有基本了解：

✅ HTML / CSS / JavaScript：网页开发的三大基石。
✅ TypeScript：React .tsx 文件使用 TypeScript，帮助你进行类型检查。
✅ Node.js 和 npm/yarn：包管理工具，帮助你安装依赖。

🛠️ 安装 Node.js 和 npm/yarn

👉 Node.js 官方网站下载并安装。
👉 验证安装：

node -v
npm -v

🛠️ 2. 安装 React 开发环境

React 提供了一个非常方便的脚手架工具：Create React App。

安装 React 项目

npx create-react-app my-app --template typescript
cd my-app
npm start

📌 说明：

--template typescript 表示项目将使用 TypeScript。
npm start 启动开发服务器，在浏览器中打开 http://localhost:3000。

🗂️ 3. 理解 React 项目结构

my-app/
├── src/                // 主要代码目录
│   ├── App.tsx         // 主组件
│   ├── index.tsx       // 入口文件
│   ├── components/     // 自定义组件
│   ├── styles/         // 样式文件
│   ├── assets/         // 静态资源
│   └── App.css         // 全局样式
├── public/             // 静态资源
├── package.json        // 项目配置文件
└── tsconfig.json       // TypeScript 配置文件

📝 关键文件解析

index.tsx：项目的入口文件，挂载根组件。
App.tsx：主组件，页面内容从这里开始。
package.json：项目依赖和脚本配置。
tsconfig.json：TypeScript 配置文件。

🧩 4. 编写第一个组件

在 src 文件夹中创建一个简单的组件：

👉 新建 `src/components/HelloWorld.tsx`

import React from 'react';

interface Props {
  name: string;
}

const HelloWorld: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}! 👋</h1>;
};

export default HelloWorld;

👉 在 `App.tsx` 中引入组件

import React from 'react';
import HelloWorld from './components/HelloWorld';

function App() {
  return (
    <div>
      <HelloWorld name="React 新手" />
    </div>
  );
}

export default App;

👉 启动项目

npm start

✨ 在浏览器中，你将看到：
Hello, React 新手! 👋

🎨 5. 添加样式

在 HelloWorld.tsx 中添加样式：

👉 新建 `src/components/HelloWorld.module.css`

h1 {
  color: #4caf50;
  font-size: 24px;
  text-align: center;
}

👉 修改 `HelloWorld.tsx`

import React from 'react';
import styles from './HelloWorld.module.css';

interface Props {
  name: string;
}

const HelloWorld: React.FC<Props> = ({ name }) => {
  return <h1 className={styles.h1}>Hello, {name}! 👋</h1>;
};

export default HelloWorld;

🔄 6. 状态管理（Hooks）

React 使用 Hooks 管理组件状态：

👉 在 `App.tsx` 中使用状态

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

export default App;

🧠 解释：

useState 用于创建和管理组件的状态。
点击按钮，count 状态增加。

🌍 7. 路由管理

安装 React Router

npm install react-router-dom

👉 配置路由（`App.tsx`）

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function Home() {
  return <h1>首页</h1>;
}

function About() {
  return <h1>关于我们</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;