React - Hello World

背景简介

创建一个简单的 React "Hello World"应用程序

环境信息

1. NodeJS 已安装 【Node.js - 安装】

示例需求

1.  创建简易 React 应用程序，首页显示 “Hello World”

详细步骤

第一步： 创建React项目

• 创建

$ npx create-react-app react-app-demo

Need to install the following packages:
create-react-app@5.1.0
Ok to proceed? (y) y


Creating a new React app in /home/myserver/demo/react/react-app-demo.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...




	****** 

Created git commit.

Success! Created react-app-demo at /home/myserver/demo/react/react-app-demo
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-app-demo
  npm start

Happy hacking!

• 启动项目，查看默认页面

$ cd react-app-demo/
$ npm start

Compiled successfully!

You can now view react-app-demo in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.122.110:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

第二步： 添加 Hello World 提示信息 

• 修改 app.js，添加 hello world 部分并保存。

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>
        <p>Hello World!</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

第三步： 重新保存并查看（无需重启，修改实时生效）

以上便是本文的全部内容，感谢您的阅读，如遇到任何问题，欢迎在评论区留言讨论。