ReactJS 教程：构建你的第一个 React 应用

你好，未来的 React 开发者们！我很兴奋能和你们一起开始这段旅程，深入 ReactJS 的世界。作为一名拥有超过十年计算机科学教学经验的人，我可以向你保证，React 不仅功能强大，而且学习起来非常有趣。那么，让我们开始吧！

什么是 ReactJS？

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 开发，并迅速成为世界上最受欢迎的前端库之一。但不用担心，如果这听起来让你感到畏惧——我们将一步一步地分解它。

为什么选择 React？

想象你正在搭一叠纸牌屋。每次你想改变什么时，你都必须小心翼翼地调整每一张牌，对吧？React 就像拥有魔法般的纸牌，当改变其中一部分时，它们会自动调整。这使得构建和更新 Web 应用程序变得更加简单和快速。

准备工作

在我们开始之前，让我们确保我们拥有所需的一切：

1. 对 HTML 和 CSS 的基本了解
2. 熟悉 JavaScript（别担心，我们会在学习过程中复习）
3. 一个文本编辑器（我推荐 Visual Studio Code）
4. 在你的计算机上安装 Node.js

创建你的第一个 React 项目

让我们开始创建我们的第一个 React 项目。我们将使用一个名为 Create React App 的工具，它只需一个命令就可以设置好我们所需的一切。

1. 打开你的终端或命令提示符
2. 导航到你想要创建项目的文件夹
3. 运行以下命令：

npx create-react-app my-first-react-app

这可能需要几分钟。完成后，进入你的新项目文件夹：

cd my-first-react-app

现在，让我们启动我们的应用：

npm start

太棒了！你应该会看到一个新浏览器窗口打开，你的第一个 React 应用正在运行。现在它还不太起眼，但我们才刚刚开始！

理解项目结构

让我们看看 Create React App 为我们设置了哪些内容：

my-first-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

现在对我们来说最重要的文件是 src 文件夹中的文件。App.js 是我们将编写大部分代码的地方。

你的第一个 React 组件

在文本编辑器中打开 src/App.js。你应该会看到类似这样的内容：

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

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
编辑 <code>src/App.js</code> 并保存以重新加载。
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
学习 React
</a>
</header>
</div>
);
}

export default App;

这是一个 React 组件。如果它看起来让你感到困惑——别担心，我们会分解它：

1. 我们导入了 React 和其他必要的文件
2. 我们定义了一个名为 App 的函数
3. 这个函数返回了一些 JSX（JavaScript XML）——一种特殊语法，看起来像 HTML 但允许我们在其中使用 JavaScript
4. 最后，我们导出这个组件，以便在其他地方使用

让我们修改这个组件，使其成为我们自己的：

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

function App() {
return (
<div className="App">
<h1>欢迎来到我的第一个 React 应用！</h1>
<p>我很兴奋学习 React！</p>
</div>
);
}

export default App;

保存文件并检查你的浏览器——它应该会自动更新！

使用状态添加交互性

现在，让我们通过添加一个计数按钮来使我们的应用更具交互性。

将 App.js 的内容替换为以下内容：

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

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

function handleClick() {
setCount(count + 1);
}

return (
<div className="App">
<h1>欢迎来到我的第一个 React 应用！</h1>
<p>我很兴奋学习 React！</p>
<button onClick={handleClick}>
你已经点击了我 {count} 次
</button>
</div>
);
}

export default App;

让我们分解一下：

1. 我们导入了 useState，这是一个 React 钩子，允许我们在组件中添加状态
2. 我们使用 useState(0) 创建了一个状态变量 count 和一个函数 setCount 来更新它
3. 我们定义了一个 handleClick 函数来增加计数
4. 在我们的 JSX 中，我们添加了一个按钮，显示计数并在点击时调用 handleClick

保存并检查你的浏览器——你现在应该有一个工作的按钮，可以计数你的点击！

创建一个新的组件

随着我们的应用增长，我们希望将其拆分为更小、可重用的组件。让我们为我们的计数器创建一个新的组件。

创建一个新文件 src/Counter.js 并添加以下代码：

import React, { useState } from 'react';

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

function handleClick() {
setCount(count + 1);
}

return (
<div>
<button onClick={handleClick}>
你已经点击了我 {count} 次
</button>
</div>
);
}

export default Counter;

现在，让我们在 App.js 中使用这个新组件：

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

function App() {
return (
<div className="App">
<h1>欢迎来到我的第一个 React 应用！</h1>
<p>我很兴奋学习 React！</p>
<Counter />
<Counter />
</div>
);
}

export default App;

看看吧！现在我们页面上有两个独立的计数器。

结论

恭喜你！你刚刚构建了你的第一个 React 应用，学习了组件、状态，甚至创建了一个可重用的组件。这只是你 React 之旅的开始，但你已经取得了很大的进步。

记住，学习编码就像学习一门新语言——它需要练习和耐心。如果有些东西一开始不太明白，不要气馁。继续尝试，继续构建，最重要的是，保持乐趣！

在我们的下一课中，我们将更深入地研究 React 的 props，更复杂的状态管理，并开始构建一个更完整的应用程序。在此之前，祝你编码愉快！

Credits: Image by storyset