React目录结构详细解析

简单说明React项目目录的大体结构

殇魂

2635人浏览 · 2023-06-11 16:44:23

殇魂 · 2023-06-11 16:44:23 发布

1. React目录

俗话说的好，要想用好一个框架，我们首先就的对其项目的目录结构有些了解。下面截图是我们初始化React项目中所存在的文件。

2.nod_modules

该目录下所对应的文件时我们所安装的包文件，其中我们也不难发现一些webpack的安装包。

3.public文件

3.1 favicon.ico

public文件里面通常放着一些静态资源。例如.ico结尾的文件即为我们项目运行成功后，在浏览器页签中所展示的icon图标，但是我们不能将其替换为png或者jpg格式的文件，如果想替换的话就必须替换为ico格式的文件。

3.2 index.html

项目的入口文件，引用了第三方类库啊，还可以引入cdn，或者样式，但是其中的<div id="root"></div>是项目的总容器，所有的内容存储在这个容器中。这个容器有且只能有一个。且在项目的其他地方我们不建议往这个容器中加入我们待渲染的组件和页面，因为在root中我们添加的是APP，如果我们再添加其他元素进去，会将我们添加的APP顶掉。

3.3 manifest.json

该文件是一个套壳的配置文件，当我们的项目需要在手机端运行时，就需要在这个文件里面进行配置。通过安卓和苹果的应用程序都需要使用专门的开发语言进行开发，因此如果我们想使用html来进行简单的移动端页面的开发，就需要进行套壳。这种就在这里不进行过多的讲解。

3.4 Robots.txt

该文件是屏蔽文件，主要是为了防止爬虫来进行页面数据的爬去，可以参考如下网站的简介

可以参考：https://blog.csdn.net/weixin_30955341/article/details/94896204

4. Src

Src文件夹存放的是这个项目的核心内容，也就是我们的主要工作区域。其中，index.js文件是和index.html进行关联的文件的唯一接口。其中的index.js我们可以理解为vue中的main.js

4.1 index.js

document.getElementById(‘root’)中的"root"便是index.html中的"root"了，便是引用页面内容了。在这里，也可以写一些内容(结构,样式,逻辑)是整个项目的根组件能够引用的原因是文档内容的头部，有import App from ‘./App’;内容，就是为了将App.js的内容引入到index.js文件中。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4.2 App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <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;

export default App;是为了将App公开，index.js才能够引用.

return的内容是类似于html结构的内容，就是jsx，jsx语法是react的主要语法。内部的div的className是为了区分html语法的一个类名，这个是div的样式引用。在这个文件中，只能用一个div容器，如果在div的同级目录添加别的内容，便会报错

className=“App”，是引用到App.css的样式。注意，页面内容样式是就近原则，首先用App.css的样式，App.css是组件的样式，index.css是全局的样式。

且我们在jsx中进行class的命名时，使用className来进行命名。其中当然react也是兼容TS的，后续的话我们会进行相关用法的学习。当前这目录结构也是最简单的目录结构，后续例如组件，请求等都要添加新的目录。