（02）React 初识——② React 工程目录文件简介 | React 基础理论实操
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
1 结构解析
在编辑器中打开项目 jianshu-test ，跟着我一步一步地学习和操作。
1.1 外层“文件”说明
-
.gitignore——当我们使用 git 的时候，我们希望将代码上传到线上，但有些特殊的文件我并不希望将其上传到线上去。此时，我们就可以将这些文件配置在.gitignore里面。 -
package-lock.json——这是 package 的“锁文件”。它可以帮我们确定我们安装的“第三方包”的具体版本，以保持团队编程的统一性。 -
package.json——这里边有很多“依赖包”。在开发项目的时候，我们会有一些“第三方模块”的依赖，而这些“依赖”都放在这里。 -
README.md——这是项目说明文件。我们可以自己用 markdown 语法写一些自己对项目的说明。
1.2 各“文件夹”说明
-
node_modules——这里边放置的是我们项目的“依赖包”，我们一般不用动。 -
public：
-
favicon.ico——用于放置定制的“页面图标”，即页面标签前边的小图标。见《HTML——② HTML 元素、属性详解》。 -
index.html——这是我们项目的首页“HTML 模板”，我们可以删除多余的注释，先看看结构，下一篇文章我们再弄清每一行代码的用途：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<!-- ❗️下边这行代码意思是：
如果网页把这个 script 给禁掉了，那么我需要给用户一个提示说，
“你应该允许你的网页去解析 JavaScript”。
这是一段容错的代码，可以使代码的“健壮性”更强。
-->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
-
manifest.json——这个跟我后边要讲到的一个概念相关，等下回过头再看。 -
src——这是我们“源代码”所放置的目录。也是我们写“工程化”代码的时候，主要编写的地方。我们打开这个目录：- 下边有一个
index.js文件，这个文件是我们整个项目的“入口文件”。
- 下边有一个
import React from 'react'; // 1️⃣从 package.json 文件里边引入 react 和 react-dom；
import ReactDOM from 'react-dom';
import './index.css'; /*
2️⃣React 的设计理念包含了很重要的一条：All in JS。
以前我们讲 CSS 和 JS 是分离的，但在 React 里边，CSS 可以像 JS 一样，
通过“模块”的形式被嵌入到 JS 里边；
*/
import App from './App'; /*
❗️❗️❗️3️⃣后边的 ./App 其实是 ./App.js 的缩写。后缀可以省略，
因为“脚手架工具”本身就会去当前目录下优先寻找后缀为 .js 的 App 文件，
并引入。
*/
import * as serviceWorker from './serviceWorker';
/*
❗️❗️❗️4️⃣从当前目录下引入 serviceWorker，它是用来帮助我们借助写网页的形式来写一些手机 App 的应用（
PWA——progressive web application）。
可以达到的效果：
比如我们借助它写了一个网页，然后将其上线到了一台支持 https 协议的服务器上。
此时的网页就具备了以下特征：当用户第一次访问这个网页时，他需要联网才可以看到这个网页。
但，当用户访问完网页突然断网了，那这时，只要我们的项目引用了 serviceWorker，即使它断网了，
用户也依然可以访问他之前浏览的那个页面。因为 serviceWorker 会将之前浏览的网页存储在浏览器之内，
用户可以离线查看！
*/
ReactDOM.render(<App />, document.getElementById('root')); /*
5️⃣将 App 挂载并渲染到页面上（
下一篇会详讲）。
*/
serviceWorker.unregister();
- 接着，我们打开
App.js：
import React from 'react'; // 1️⃣首先，引入 react；
import logo from './logo.svg'; // 2️⃣引入了一个 svg 格式的 logo 图标；
import './App.css'; /*
3️⃣App.js 文件里边引入了一个 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;
-
src里边还有一个App.test.js文件，它是一个“自动化”测试文件。当我们做 React 项目的时候，由于会涉及到“函数式”的编程，所以可以做一些“自动化测试”。 -
❓遗留问题：
public文件夹中，有一个manifest.json，它是指什么呢？
答：这里就联系到刚刚讲的 PWA 和 serviceWorker。
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
以上代码定义了：
- 我这个网页，如果你当成 App 使用，就可以把它存储在桌面上（即手机桌面上有一个快捷方式可以直接进入到网址）；
- 可以设置快捷方式展示的图标、对应的网址，以及主题颜色等等。
2 精简项目目录和文件中的代码
对于一个初始项目，我们可以将上边很多暂时用不上的文件和代码删掉，以使工程尽可能地精简化。
我们从第一个文件夹开始：
-
node_modules——不用动； -
public：-
favicon.ico——不动，网页标签的图标每个网站都得有； -
index.html——删除多余的注释，删掉暂时用不上的代码（如 PWA 相关）：
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>jianshu-test</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
manifest.json——删掉，我们还用不着实现 PWA。
src：-
App.css——删掉，之后我们自己在合适的位置写我们需要的样式； -
App.js——删除多余的代码：
-
import React from 'react';
function App() {
return (
<div>
hello, qdywxs.
</div>
);
}
export default App;
App.test.js——删掉，我们先不用管“自动化测试”；index.css——删掉；
index.js——删除多余的代码（如 PWA 相关）：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.js——删掉，我们先不用去实现 PWA。
最后页面效果：
祝好，qdywxs ♥ you！