创建第一个React应用

在这个教程中，我们将一起学习如何创建第一个React应用。React是一个用于构建用户界面的JavaScript库，由Facebook维护。

环境准备

在开始之前，请确保您已经安装了Node.js和npm。您可以通过以下命令检查是否已正确安装：

node -v
npm -v

创建项目

首先，打开终端或命令提示符，然后运行以下命令来创建一个新的React项目：

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

这将创建一个名为my-first-react-app的新目录，其中包含所有必要的文件和文件夹。

运行应用

进入项目目录：

cd my-first-react-app

然后，运行以下命令来启动开发服务器：

npm start

这将在本地开发服务器上启动您的React应用，默认情况下，它将在http://localhost:3000上运行。

应用结构

当您创建一个新的React项目时，以下目录结构会被创建：

my-first-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── index.js
│   ├── index.css
│   └── ...
├── package.json
└── ...

• public/：包含静态文件，如HTML、CSS和图片。
• src/：包含应用的所有源代码。
• node_modules/：包含项目依赖的模块。

编写第一个组件

在src/目录中，您会找到一个名为App.js的文件。这是应用的主要组件。打开这个文件，并替换以下代码：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

这段代码创建了一个简单的React组件，它显示一个标题“Hello, world!”。

部署应用

当您完成开发后，可以使用以下命令将应用部署到任何静态网站托管服务，如GitHub Pages、Netlify或Vercel：

npm run build

这将在build/目录中创建一个生产版本的应用，您可以将这些文件上传到您的静态网站托管服务。

更多关于React教程，请访问React官方文档。

<center><img src="https://cloud-image.ullrai.com/q/react/" alt="React"/></center>