ThatManK Mobile Article

使用脚手架创建项目

Category: React Tutorial: React基础 Published: 2026-04-07 13:58 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