React学习教程，从入门到精通， React教程：构建你的第一个 React 应用(1）

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

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

什么是 React？

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

为什么选择 React？

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

准备工作

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

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

创建你的第一个 React 项目

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

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

bash 复制代码

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

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

bash 复制代码

cd my-first-react-app

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

bash 复制代码

npm start

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

理解项目结构

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

diff 复制代码

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。你应该会看到类似这样的内容：

jsx 复制代码

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 组件。如果它看起来让你感到困惑------别担心，我们会分解它：

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

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

jsx 复制代码

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 的内容替换为以下内容：

jsx 复制代码

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;

让我们分解一下：

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

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

创建一个新的组件

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

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

jsx 复制代码

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 中使用这个新组件：

jsx 复制代码

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 之旅的开始，但你已经取得了很大的进步。

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