📜  如何运行 React 内置版本 - Javascript (1)

📅  最后修改于: 2023-12-03 14:53:18.808000             🧑  作者: Mango

如何运行 React 内置版本 - JavaScript

React 是一种常用的 JavaScript 库,能够快速构建用户界面。通过内置版本,您可以在本地开发环境中运行 React 应用程序。本文将介绍如何在本地运行 React 内置版本以及如何配置其开发环境。

下载和安装 Node.js

首先,您需要在本地计算机上安装 Node.js。您可以从官方网站 https://nodejs.org/en/download/ 下载已编译的二进制文件。

选择与本地操作系统相对应的版本并运行安装程序,完成后您便可以在终端中使用 Node 和 npm 命令。

安装 React

使用 npm 命令来安装 React。在终端中运行以下命令:

npm install react

React 将被安装到您的项目目录下的 node_modules 文件夹中。

创建 React 应用程序

使用 create-react-app 工具创建一个 React 应用程序。在终端中运行以下命令:

npx create-react-app my-app
cd my-app

创建完成后,您将看到如下文件结构:

my-app
├── README.md
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

在该应用程序的根目录下运行以下命令:

npm start

这将启动一个本地开发服务器并在浏览器中打开该应用程序。

编写 React 组件

您可以在 src/App.js 文件中编写 React 组件。以下是一个简单的组件示例:

import React from 'react';

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

export default App;

在编辑器中进行更改并保存后,您将在浏览器中看到更新的内容。

结论

通过上述步骤,您已经可以在本地运行 React 内置版本,并开始编写 React 应用程序。如果您需要更多信息,请查看 React 官方文档 https://reactjs.org/docs/getting-started.html