使用脚手架创建项目

Tutorial: React基础 Category: React Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0

32_使用脚手架创建项目

脚手架的安装
```
npm install -g create-react-app
```
使用脚手架创建项目
```
create-react-app hello-react
```

保留的主要项目目录及文件内容

 $ ls -r public/ src/
 public/:
     favicon.ico  index.html
 src/:
     App.js  index.js

 $ cat public/index.html
     <!DOCTYPE html>
     <html lang="en">
         <head>
             <meta charset="UTF-8" />
             <meta http-equiv="X-UA-Compatible" content="IE=edge" />
             <meta name="viewport" content="width=device-width, initial-scale=1.0" />
             <title>Document</title>
         </head>
         <body>
             <div id="root"></div>
         </body>
     </html>

 $ cat src/App.js
     function App() {
         return (
             <div className="App">app</div>
         );
     }
     export default App;

 $ cat src/index.js
     import React from "react";
     import ReactDOM from "react-dom/client";
     import App from "./App";

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

查看 package.json 配置

{
  "name": "hello-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

启动项目
```
cd hello-react
npm start
```

Prev: key的作用 Next: 使用组件