2 初识 React之创建你的第一个 React 应用

在我们了解了 React 的起源与发展后，接下来就要动手创建我们的第一个 React 应用。通过这个过程，你将会初步体会到 React 的开发模式以及组件化的魅力。

环境准备

在开始之前，确保你已经安装了以下工具：

1. Node.js：React 是基于 Node.js 的，所以你需要先安装 Node.js。可以通过访问 Node.js官网 下载并安装合适的版本。
2. npm：Node.js 安装包中已经包含了 npm（Node Package Manager），它用于管理 JavaScript 依赖包。

创建 React 应用

一旦环境准备好后，我们可以通过 Create React App 快速创建我们的第一个 React 应用。这是一个官方的脚手架工具，能够帮助我们快速搭建项目结构。

使用 Create React App

在命令行中输入以下命令：

npx create-react-app my-first-app --template typescript

这里的 my-first-app 是你的项目名称，可以根据你的需要进行修改。--template typescript 选项是为了创建一个 TypeScript 项目。

这个命令会自动生成一个包含基本文件结构和配置的 React 应用，并且会安装所需的依赖。

运行应用

进入项目目录并启动开发服务器：

cd my-first-app
npm start

现在你的应用应该会在浏览器中自动打开，并且能看到一个基本的欢迎页面。

项目结构简介

在项目中，主要的文件和文件夹包括：

• src/：源代码目录，所有的 React 组件和应用逻辑都在这里。
• public/：公共资源目录，里面的 index.html 是 React 应用的入口文件。
• package.json：项目配置文件，管理项目依赖和脚本。

创建你的第一个组件

React 的核心理念是通过组件来构建用户界面。我们可以从创建一个简单的组件开始。打开 src/App.tsx 文件，你会看到如下代码：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

修改组件

我们可以在 App 组件中增加一些内容。让我们来添加一个简单的计数器组件。用以下代码替换掉 App 组件的内容：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0); // 定义状态变量 count

  return (
    <div className="App">
      <h1>计数器</h1>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

export default App;

代码解析

在这个示例中，我们做了以下几件事：

1. 使用状态：通过 useState Hook 创建一个状态变量 count，默认值为 0。
2. 更新状态：点击按钮时，调用 setCount 来更新 count 的值。
3. 显示内容：使用大括号 {} 在 JSX 中插入 JavaScript 表达式，即当前的计数值。

总结

通过这一节的学习，我们成功创建了我们的第一个 React 应用，并了解到基础的组件结构和状态管理。在下一节中，我们将深入了解 JSX 和 虚拟 DOM 的概念，这将使你更深刻地理解 React 的渲染机制和使用方式。

准备好迎接新的学习挑战了吗？让我们继续前行吧！