上节课我们学习了如何用脚手架来创建并启动一个项目，我们看一下这个项目中的文件，有这么多，这都是什么啊？所以这节课我们开始介绍一下这写文件都是干什么的。

回顾

在开始这节课的内容之前，我们来对上节课的内容来做一个简单的回顾。

  • 脚手架是帮助开发人员快速创建基于某个模板的项目的工具
  • 使用npm全局安装create-react-app库
  • 在命令行中使用create-react-app命令来创建脚手架项目
  • 创建完成项目之后可以通过npm start来启动项目

以上便是上节课的内容要点，接下来我们来介绍一下脚手架中的文件。

概述

我们上节课已经成功的让示例页面展示出来了，一个logo在那转，但是下面还有两行文字，其中第一行文字说让我们编辑src下的App.js并且保存，这样就可以重新加载页面了。

image-20220106113242783

那么我们来看一下这个文件吧：

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;

我们来看一下代码，这是不是我们很眼熟的东西啊？创建了一个函数式组件。那么我们把这儿个<a>删掉然后保存看看页面是不是会有变化

image-20220106113308086

确实是已经更改了所以我们只要一改代码，马上页面就会发生变化，所以说脚手架是很方便的。

那么我们再来看我们整个项目的文件列表

有三个文件夹和 4 个文件。其中那个.gitignore文件大家用过git的都知道，是来做忽略的，我们不用关注，就不多说了，其次README.md文件，这是一个讲述这个项目是什么的一个文件，我们也就不再关注了。另外两个package的json文件是什么呢？这两个是我们这个项目的依赖以及一些配置，基本上我们是不需要手动去配置的。也不需要我们太多关注，那个node_modules是什么呢？这个是我们这个项目所有依赖环境的包都在这里面，我们是不能去动的，如果说这里面什么东西被删了就可能会导致环境崩溃。

那么这么一看，我们的项目是不是就被分为了两大块？一块是我们不需要去动的，另一块是需要我们去修改的，而需要我们修改的这一块里面又进而分成了两块public和src。这节课我们先来介绍一下public这个目录。

public目录

这个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" />
    <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>

首先最开始的基本格式我们就不在多说了，我们看第 5 行，这个也简单，这是指定我们说的那个偏爱图标，就是浏览器的标签上的那个logo，但是%PUBLIC_URL%这个是什么呢？这个东西在react脚手架中是一个关键字的格式，就相当于%PUBLIC_URL%是一个变量，这里的意思就是代表了public这个文件夹的路径

再往下的这个meta标签，这个是用来开启理想视口，永远做移动端网页的适配。我们目前不需要太关注，再往下看依然还是meta标签这个是用于设定浏览器标签页页签的主题的但是这各只对移动端有效而且还只针对于安卓系统。那么再看下面这个meta标签，里面是一些网站的描述信息，也不是什么重要的东西。

再往后有两个link标签，看一下第一个，也是一个logo但是这个是在哪用的呢？rel属性也说了，apple-touch-icon，那很明显，这是在苹果的触控系统中用的，那么就是移动端呗，苹果除了移动端还有什么显示器有触控系统啊，这个其实呢就是苹果系统中把一个网站添加到主屏幕上要用到的一个logo，但是这个只支持苹果移动设备，我们也不需要太过关注。那么另一个link标签里面用到了一个manifest.json文件，这个东西是干什么的呢？前端人员写出来的代码是不是都是在浏览器中来运行的？但是呢如果我写了一个页面，我给这个页面套了一个壳儿，使得这个页面变成了一个安卓手机上的一个App。那么这个过程中就要用到manifest.json，这个文件就是在加壳的过程中所需要是用到的一个配置文件，里面会有这个应用的相关信息或者权限的要求等等。但是目前来说我们没有去做移动端，也不需要过多关注这个东西。

到这里head标签里的东西我们是不是就已经没有什么陌生的东西了？那么好在看看body标签，里面有一个noscript标签，这个是什么意思呢？我们之前网页中是不是根本就没有出现过这个标签中的内容？因为这个标签是会去检查你的浏览器只不支持js的运行。如果说你的浏览器不能运行js或者说你的浏览器把js禁用了吗，那么页面上就会显示出这行提示。但是现在都什么年代了，几乎不会出现不支持js的浏览器的。

最后一个地儿，这里有一个div。而且什么都没有，就只有一个id属性是root，那么大家有没有觉得很熟悉？是不是自然而然就联想到了我们组件渲染要用到的那个容器？没错，这个东西就是用来当容器的。所以说我们可以在这个页面上来渲染多个组件。可能有人说，这就一个容器啊，我们可以创建多个容器啊，而且我们在组件里也可以嵌套组件啊。所以说在这个页面上我们完全可以渲染多个组件。

index.html文件讲完了，那么还剩下一个文件就是robots.txt了。这个其实就是一个爬虫规则文件，我们可以在这声明，当有爬虫来爬取页面的时候什么东西可以爬取，什么东西我们是不允许爬取的。当然也没有什么用，没有爬虫会来遵守我们的规则的。

总结

至此，我们便完成了public目录中文件的介绍

  • favicon.ico浏览器标签页那一栏中的logo
  • index.html项目应用的主页面永远渲染多个组件
  • logo192.png logo图片
  • logo512.png logo图片
  • manifest.json应用加壳配置文件
  • robots.txt爬虫规则文件

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/public_file_of_pjc/