React 初学者指南：从零开始构建第一个 React 应用

阿福的工作室2024-12-10 12:57

React 是一个用于构建用户界面的 JavaScript 库，它能够让我们高效地构建复杂的 UI。对于 React 初学者来说，最重要的就是理解它的基本概念以及如何开始使用它。本文将引导你从零开始构建你的第一个 React 应用

1.1. 安装 React 环境

首先，确保你已经安装了 Node.js 和 npm（Node 包管理器）。可以通过以下命令检查版本：

复制代码

node -v
npm -v

然后，使用 create-react-app 工具来初始化一个 React 项目：

复制代码

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

然后，使用 create-react-app 工具来初始化一个 React 项目：
1.2 . 创建一个简单的组件

React 的核心概念是组件。我们可以通过函数组件或类组件来定义 UI。以下是一个简单的函数组件：

复制代码

import React from 'react';

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

export default HelloWorld;

接下来，打开 src/App.js，并替换成我们刚刚创建的组件：

复制代码

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

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;