构建一个my-app的项目

npx create-react-app reactproject cd reactproject

启动编译当前的React项目，并自动打开 http://localhost:3000/

npm start

以上命令执行完成后，则自动打开： http://localhost:3000/

项目目录删除目录中我们不需要用到的文件（public中只需保留html文件）

├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── App.css             # App根组件的css
│   ├── App.js              # App组件代码
│   ├── App.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

保留文件如下

├── package.json
├── public                  # 这个是webpack的配置的静态目录o
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
├── src
│   ├── App.js              # App组件代码
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
└── yarn.lock

index.html文件修改

1.删除上方已删除的引入文件 2.删除不必要的注释

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.js文件修改

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

app.js文件修改

function App() {
  return (
    <div>React 项目运行成功</div>
  )
}

export default App

重新刷新页面即可。

React 工程化之 create-react-app

全局安装

构建一个my-app的项目

启动编译当前的React项目，并自动打开 http://localhost:3000/