使用create-react-app开始React的启动

打开终端并执行命令。

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

如果使用npx，可以在不下载本地或全局包的情况下使用包。非常方便在只想使用一次等情况下。
使用create-react-app能够生成React应用程序，并且安装babel、webpack等包。

已安装应用程序的配置如下

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

在我的应用程序（my-app）上执行以下命令。

npm start　my-app

在index.js中，将名为App的组件渲染到根节点root上。

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

渲染的目标是index.html的根目录。React是单页应用程序，渲染的目标只会是index.html。

my-app
├── public
│   ├── index.html

<div id="root"></div>

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

export default App;

在浏览器中打开http://localhost:3000/，渲染App函数中return的内容。