使用 React.js 显示 hello world

create-react-app 是一个用于创建具有默认配置的 React.js 项目的命令。Create-react-app 将帮助运行 React 应用程序。命令将在 npm 或 yarn 上执行。

如果计算机上安装了 npm 和 node.js，请使用以下命令全局安装 create-react-app：

npm install –g create-react-app

项目创建 - 要在执行上述命令后创建项目，请运行以下命令：

npx create-react-app hello-world-example

npx 自 npm 5.2+ 版本起提供，可以使用 npm –version 在终端中检查 npm 版本。

如果 npm 版本为 5.2+，则可以使用以下命令直接创建 React.js 项目：

npx create-react-app hello-world-example

如果 npm 版本为 6+，npm init react-app hello-world 也是创建 React.js 项目的一个选项。

使用 yarn，我们有以下命令：yarn create react-app hello-world-example

完成上述命令后，更改目录到 hello-world-example

使用 create-react-app，预先配置了使用高级 JavaScript 功能所需的 webpack 或 babel，我们只需专注于编写代码即可。

cd hello-world-example

要执行应用程序，请在终端上运行以下命令：

npm start

npm start 运行一个实时开发服务器，代码更改将自动刷新浏览器并反映更改。

将打开一个浏览器窗口，如果未自动打开，请手动打开浏览器并在地址栏中输入 url：localhost:3000。3000 是 React 应用程序中使用的默认端口。如果端口号有任何问题，可以更改端口号。

应用程序运行时的默认文本如下所示：

显示

要更新，请使用任何代码编辑器工具（例如 Visual Studio Code）打开项目。

打开文件 App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
   return (
      <div className="App">
         <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>Edit <code>src/App.js</code> and save to reload.</p>
            <a
               className="App-link"
               href="https://reactjs.ac.cn"
               target="_blank"
               rel="noopener noreferrer">
               Learn React
            </a>
         </header>
      </div>
   );
}
export default App;

将 return 语句的内容更改为仅 hello World 文本：

import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
   return (
      <div className="App">
         Hello World !
      </div>
   );
}
export default App;

浏览器上的文本将立即更改。