📌  相关文章
📜  安装 react js - Javascript (1)

📅  最后修改于: 2023-12-03 15:09:24.982000             🧑  作者: Mango

安装 React JS - Javascript

React JS是一个JavaScript库，用于构建漂亮，高效的用户界面。它由Facebook开发，并且用于构建Facebook及Instagram上的用户界面。React被认为是目前最受欢迎的前端库之一。这里将介绍如何安装React JS。

安装 npm

React使用npm（Node Package Manager）进行安装，所以在安装React之前，需要确保npm已经安装在计算机上。在终端中运行以下命令来检查npm是否安装。

npm -v

如果已经安装了npm，将会显示版本号。

创建React应用程序

React应用程序可以使用Create React App快速创建。这是一个用于生成React项目应用程序的官方命令行工具。

要安装Create React App，只需在终端中键入以下命令。

npm install -g create-react-app

该命令将全局安装Create React App。

在项目中安装React

要在项目中安装React，请在终端中进入项目目录并键入以下命令。

npm install react react-dom

这将安装React以及React DOM。React DOM是一个React渲染器，用于渲染React组件到浏览器中。

引入React

在项目的HTML文件中，需要将React和React DOM引入到文件中。

<html>
  <head>
    <meta charset="UTF-8">
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

这将在HTML文件中引入React和React DOM，并且准备后续将要编写的React代码的渲染。

编写React代码

为了展示如何编写React代码，将从一个示例Hello World应用程序开始。

import React from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render(<App />, document.getElementById('root'));

此代码将创建一个名为"App"的React组件，并将其渲染到ID为“root”的DOM元素中。此组件将输出“Hello World!”文本。

运行React应用程序

现在，React应用程序已经就绪，可以在终端中启动应用程序。进入项目根目录，并键入以下命令：

npm start

这将启动React应用程序，并在浏览器中打开它。

以上就是安装React JS的基本步骤。

参考资料