04 目录结构目录结构删除其他文件删除src下除了index.js以外的文件, 并修改index.js如下删除pu

目录结构

node_modules: 存放插件的特殊目录

public: 存放公共资源如图标, 字体文件, 模板等

src: 源代码

.gitignore: 使用git时所需忽略的文件, 一般为node_modules

package.json: 存放当前项目所需要的包(三方库), 因为node_modules太大一般不上传, 而是使用该文件确定下载了哪些包, 然后别人下载该项目只需要npm就会自动去寻找这些插件安装

package-lock.json: 当前项目使用插件的快照, 确保后续安装的依赖包与上次安装的一样, 避免因为版本不一致引发的错误. 还会记录所有包的信息如版本号, 下载地址等, 下次安装就快一点.

readme.md: 常用的项目说明/项目如何使用的文档

删除其他文件

删除src下除了index.js以外的文件, 并修改index.js如下

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <div>
      hello world
    </div>
  </React.StrictMode>
);

删除public下其他文件, 仅保留以下两个文件

修改index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

后期webpack打包主要针对src下文件, 并以public下的index.html为页面模板

运行

运行该项目(开发环境)

npm start

打包(生产环境), 用作最后上线项目

npm build