使用 React.js 创建 Web 应用程序的教程

React.js 是一个流行的前端开发库，用于构建交互式用户界面 (UI)。它由 Facebook 开发，已被包括 Instagram、Airbnb 和 WhatsApp 在内的众多知名公司采用。如果您正在寻找构建高效、快速且响应迅速的 Web 应用程序的方法，React.js 或许是您的理想之选。

彭达胡乱

开始之前，请确保您的计算机上已安装 Node.js 和 npm（Node 包管理器）。Node.js 和 npm 至关重要，因为它们提供了使用 React.js 开发 Web 应用程序所需的环境和工具。

步骤 1：初始化 React 项目

要创建一个新的 React.js 应用，我们可以使用 Create React App，这是一个应用创建工具，可以最大程度地简化初始配置。在终端或命令提示符中运行以下命令：

“`重击
npx 创建反应应用程序我的应用程序
cd 我的应用程序
npm开始
“`

这条命令会创建一个名为 `my-app` 的新目录，下载并安装所有必要的依赖项，然后启动开发服务器。现在你可以打开浏览器并访问 `http://localhost:3000` 来查看默认的 React.js 应用程序。

步骤二：文件夹结构

让我们来看一下 Create React App 创建的文件夹结构：

“`
我的应用/
│ ...
│ │ 公共/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
“`

– `node_modules/`：包含项目的所有依赖项。
– `public/`：包含静态文件，包括作为应用程序入口点的 `index.html`。
– `src/`：您将花费大部分时间在这里。包含 React 组件、CSS 文件和其他资源。

步骤三：删除不必要的文件

为了从零开始，我们先删除一些不必要的文件。删除 `src/` 文件夹下的 `logo.svg` 和 `App.test.js` 文件。然后，打开 `App.css` 和 `index.css` 文件，删除其中的所有 CSS 代码，以便创建一个全新的样式表。

步骤 4：创建您的第一个组件

React.js 是基于组件的。组件是构建 Web 应用程序的基本单元。让我们修改 `App.js` 文件来创建我们的第一个组件。

打开 `src/App.js` 文件，并将其替换为以下代码：

“`jsx
从“反应”导入反应；
导入'./App.css'；

功能应用程序（）{
返回（

);
}

导出默认应用程序；
“`

使用 JSX（JavaScript XML）初始化 `App.js` 中的 React 代码，JSX 允许我们在 JavaScript 中编写类似 HTML 的语法。保存更改并在浏览器中查看结果。

步骤 5：添加新组件

现在我们来添加一些新组件。在 `src` 文件夹内创建一个名为 `components` 的新文件夹。然后在 `components` 文件夹中创建一个名为 `HelloWorld.js` 的新文件。

“`jsx
从“反应”导入反应；

function HelloWorld() {
返回（

);
}

export default HelloWorld;
“`

打开 `App.js` 文件，并导入我们刚刚创建的 `HelloWorld` 组件：

“`jsx
从“反应”导入反应；
导入'./App.css'；
import HelloWorld from './components/HelloWorld';

功能应用程序（）{
返回（

);
}

导出默认应用程序；
“`

现在，`App.js` 在主页上渲染 `HelloWorld` 组件。

步骤 6：使用 useState 添加状态管理

React 提供了非常强大的 Hooks 来管理状态。让我们给应用程序添加一些状态。例如，添加一个计数器，每次点击按钮时计数器都会递增。

打开 `HelloWorld.js` 文件，添加 state 和 `useState` hook：

“`jsx
从'react'导入React，{useState}；

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

const incrementCount = () => {
setCount(计数 + 1);
}

返回（

);
}

export default HelloWorld;
“`

`count` 状态的初始值为 0，每次单击按钮时，`incrementCount` 函数都会增加此值。

步骤 7：添加样式

要添加样式，我们可以在 `App.css` 文件中使用 CSS，也可以使用像 styled-components 这样的 CSS-in-JS 库。不过，我们暂时先使用标准的 CSS。

打开 `App.css` 文件并添加一些样式：

“`CSS
。应用程序 {
text-align：center;
}

.App-header {
背景颜色：282c34；
最小高度：100vh；
显示：flex;
弹性方向：列；
align-items：居中;
证明内容：中心；
字体大小：calc(10px + 2vmin);
白颜色;
}

按钮 {
填充：10px 20px;
margin-top：20px;
font-size：16px;
}
“`

步骤 8：使用 React Router 添加路由

为了在应用程序的不同页面之间添加导航，我们可以使用 React Router。运行以下命令即可安装 React Router：

“`重击
npm 安装 react-router-dom
“`

然后，在 `components` 文件夹中创建两个新组件：`Home.js` 和 `About.js`。

`Home.js`：
“`jsx
从“反应”导入反应；

函数主页（）{
返回（

);
}

导出默认首页；
“`

`About.js`：
“`jsx
从“反应”导入反应；

函数关于() {
返回（

);
}

导出默认关于；
“`

接下来，打开 `App.js` 文件并设置路由：

“`jsx
从“反应”导入反应；
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
导入'./App.css'；
import HelloWorld from './components/HelloWorld';
从 './components/Home' 导入 Home；
从 './components/About' 导入关于；

功能应用程序（）{
返回（

);
}

导出默认应用程序；
“`

这样，我们就为应用程序添加了不同页面之间的基本导航功能。

关闭

这是一个使用 React.js 创建 Web 应用程序的基础教程。我们涵盖了项目设置、组件创建、状态管理、样式和路由。React.js 拥有丰富的生态系统，其中包含众多库和工具，可以帮助您构建更复杂的 Web 应用程序。

祝你好运，希望这篇教程能帮助你开启 React.js 的学习之旅！