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

墨蓝 2022-12-09 02:50 136阅读 0赞

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]

## 1 . yarn.lock 文件 ##

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

## 2 . README.md 文件 ##

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

## 3 . package.json 文件 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]

## 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" />
        
        
        <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" />
        
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <title>React App</title>
      </head>
      <body>
        
        <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 . 其余文件其实都可以删了，删除之后最初始的项目这样也是可以运行的**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/96154b4f5d024176bbef7ee4b99f492a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/6cbf26bbb98f493994cd8015c9c6fced.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/bf91aa5f778b489db08506aa9a08d4d6.png