webpack 创建的 React 项目，的基础目录树作用介绍

刚创建的最基础的目录由以下这些文件夹和文件组成

在这里插入图片描述

1 . yarn.lock 文件

yarn.lock文件中存放的是，整个项目所依赖的第三方模块的各种各样的信息，其中包括模块名称，和模块具体的版本号。
这个文件基本不要乱动，一旦改错，整个项目都会崩溃，一般来说也不需要大家做任何的修改，放着就行了

2 . README.md 文件

关于项目的所有说明，都会写在这个文件里
项目该开始时，里面会有一些默认的项目说明，我们可以根据自己的需求删掉，并写上自己想表达的项目说明

3 . package.json 文件

这个文件呢，对你的项目进行了一个配置或者说明

在这里插入图片描述

4 . .gitignore 文件

如果你使用 git（无论是github gitlab gitee）进行项目管理，在上传项目时，有些文件不想上传到远程仓库，就可以把不想上传的项目，配置到这个文件夹里

5 . node_modules 文件夹

项目中所有依赖的第三方模块都存放在这个文件夹下，这个目录一般不用动，
当我们运行完 yarn run start 之后，把第三方模块生成好，这个文件就自动生成了。

6 . public 文件夹

public 文件夹下面有很多文件，一些图片文件可以不用管，主要看一下 index.html 这个文件，这个页面也就是我们项目一开始打开，看到的页面

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- 设置了浏览器小图标 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 设置了移动端 content属性值，width:可视区域的宽度，值可为数字或关键词device-width-->
    <!-- intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 -->
    <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"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- manifest新技术，三言两语说不清，用不到就删掉 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <!-- 加入你的浏览器不支持js语言，那就会提示这么一句话 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

7 . src 目录，也是最重要的一个目录

1 . （最重要的文件）页面入口执行的文件 index.js文件，其余同级目录下的所有文件都可以删掉，就这个不可以

// 项目初始化就默认引入的模块
import React from 'react';
import ReactDOM from 'react-dom';
// 可以在js文件中引入css文件,以前只能在html文件中引入css,现在可以在js中引入css
// 也是项目初始化默认自带的，可以删掉，没啥用，删了之后也把同级下的index.css文件删掉
// 也可以不删掉，作为一个全局的样式文件使用，定义一些全局样式，如p0+m0+bz
import './index.css';
// ./App其实是App.js的缩写，实际是引入了App.jsx页面文件
// 但这里只是单纯的引入而已，并没有挂在到页面上
// 需要执行 ReactDOM.render 代码，才会把App.jsx页面展示出来
import App from './App';
// 实现pwa技术，可以删掉，如果删掉这行，记得把下面的serviceWorker.unregister();也删了
// 也可以把同级的serviceWorker.js文件删了
import * as serviceWorker from './serviceWorker';

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

2 . App.js 文件，其实是一个 jsx 文件，React 独特的文件后缀，就像Vue中的 .vue文件后缀一样，表示的是一个单页面组件
不同点是，.vue 文件更像 html 文件，.jsx 文件更像 js 文件，但本质上都是单页面组件，都是用来编写页面用的

// 整个jsx文件都是默认展示的页面，可以把整个文件删掉
import React from 'react';

// js中不但可以引入css，还可以引入图片
import logo from './logo.svg';
// 引入的css样式文件，对本页面进行样式修改
import './App.css';

function App() {
    
    
  return (

    // 这就是一段jsx语法的代码，看起来好像是html代码，其实不是的，是jsx语法
    <div className="App">
      <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>


  );
}

export default App;

3 . App.test.js文件
一个自动化测试的文件，可留可不留

4 . 其余文件其实都可以删了，删除之后最初始的项目这样也是可以运行的
在这里插入图片描述