在线笔记

React 是一个用于构建用户界面的 JavaScript 库，特别是用于构建单页面应用（SPA）。下面我将通过一个简单的示例来展示如何使用 React 框架创建一个基本的应用。

步骤 1: 创建 React 应用

首先，你需要安装 Node.js 和 npm（Node 包管理器）。然后，你可以使用 create-react-app 这个脚本来快速创建一个新的 React 应用。

1. 打开终端或命令提示符。
2. 运行以下命令来全局安装 create-react-app：

   npx create-react-app my-react-app

   或者如果你已经全局安装了 create-react-app：

   create-react-app my-react-app

3. 进入项目目录：

   cd my-react-app

步骤 2: 运行应用

在项目目录中，运行以下命令来启动你的 React 应用：

npm start

这将启动开发服务器，默认在浏览器中打开 http://localhost:3000。

步骤 3: 编写你的第一个 React 组件

打开 src/App.js 文件，这是你的主组件文件。你可以修改这个文件来显示一些文本或添加更多的 React 组件。

例如，修改 App.js 文件为：

import React from 'react';
import './App.css'; // 如果需要，引入 CSS 文件

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
      </header>
    </div>
  );
}

export default App;

步骤 4: 添加更多组件

你可以创建更多的 React 组件来丰富你的应用。例如，创建一个名为 Welcome.js 的新组件：

// src/Welcome.js
import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Welcome;

然后在 App.js 中使用这个组件：

// src/App.js
import React from 'react';
import './App.css';
import Welcome from './Welcome'; // 引入新组件

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Welcome name="World" /> {/* 使用 Welcome 组件 */}
      </header>
    </div>
  );
}

export default App;

保存这些更改后，你的应用将显示 "Hello, World!"。

步骤 5: 构建你的应用（可选）

当你的应用开发完成并准备好部署时，你可以构建你的应用：

npm run build

这个命令会在 build 文件夹中生成一个优化过的生产版本的应用，你可以将这个文件夹中的内容部署到任何静态文件服务器上。

通过以上步骤，你可以开始使用 React 框架创建自己的应用了。React 的强大之处在于其组件化的开发方式，使得构建复杂的应用变得简单而高效。