create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

1.安装create-react-app

1)指定淘宝镜像

经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 

2)全局安装

npm install -g create-react-app

3)安装成功后查看react的版本信息

npm info react

2.使用create-react-app创建项目

create-react-app reactdemo
cd reactdemo
npm start

#也可以使用npx创建项目
npx create-react-app reactdemo
cd reactdemo
npm start

控制台显示以下信息。

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

尝试修改 src/App.js 文件代码：

import logo from './logo.svg';
import './App.css';

function App() {
    return (
        <div className="App">
            {/* react的注释方式 */}
            {/*
      <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 className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <h2>欢迎来牛牛编程</h2>
            </div>
            <p className="App-intro">
                你可以在 <code>src/App.js</code> 文件中修改。
            </p>
        </div>
    );
}

export default App;

修改后，打开 http://localhost:3000/ （一般自动刷新），输出结果如下:

src/index.js 是一个入口文件，我们可以尝试直接修改 src/index.js 文件代码如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  /*
  <React.StrictMode>
    <App />
  </React.StrictMode>
  */
   <Hello />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

这时候浏览器打开 http://localhost:3000/ 就会输出：