[React] 3 第一个React程序-HelloWorld

目录

1 前言

2 第一个React程序

2.1 创建项目-myreact

2.2 运行项目

2.3 访问项目

 2.4 第一个react程序-helloworld

---

1 前言

上一篇，已经搭建好了react的基础环境。我们可以借助create-react-app脚手架来快速创建一个react项目。这一篇就来学习react项目的第一个程序的编写和运行。

2 第一个React程序

2.1 创建项目-myreact

cmd执行命令：

create-react-app myreact

2.2 运行项目

由脚手架创建的项目，已经包含了一个初始的页面，因此我们可以直接运行项目，然后查看下效果，运行react项目的命令为：

npm run start

这个命令不用死记硬背。懂的node的同学，都知道node项目都有一个package.json文件，在这个文件里头定义了一些脚本命令，比如myreact项目里头定义的脚本命令如下：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

那么这些命令语义化这么的强，我相信，直接看命令的名称就知道这些命令要做什么用的。其中start表示运行项目，所以启动项目的命令为：npm run start。其实学习过vue-cli的同学，我相信上面这个肯定不陌生。

2.3 访问项目

react脚手架创建的项目，是完全沿袭了webpack的优点：默认第一次运行项目的时候，会自动的打开浏览器访问项目（这边的第一次表示非修改代码后项目自动刷新运行，而不是指整个项目周期里头的第一次运行哦），根据网页打开的网页，我们知道了react的项目的默认的启动端口是3000。效果如下：

 2.4 第一个react程序-helloworld

项目运行成功了，这也才只是万里长征第一步。现在要做的就是找到页面上显示这些东西在哪里显示的。

不管通过哪种手段，我相信，都可以很快的找到，网页上展示的内容在App.js里头：

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.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

所以这个时候就要开始看这个文件的代码了，然后改成我们的第一个程序-helloworld。

我相信大家看完程序跟我一样都是一头雾水，但是都能看个大概：html写在一个js的方法里头。

你们的直觉和我一样牛逼，是正确的。所以稍微改下代码：

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.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Hello World
        </a>
      </header>
    </div>
  );
}

export default App;

改完之后，ctrl + s，保存，会发现页面立马自动更新了，这个特性跟vue-cli一样。很赞。

至此，我们的第一个react程序就实现了。

下一篇分享react是如何将html卸载js的方法里头，并且渲染到页面上的。