挑战 React 第七篇

上篇了解了package.json，此篇会介绍剩下来的档案与资料夹。

资料夹结构介绍

档案

用语法糖 create-react-app 建立 Learn_react 专案后，除了上篇介绍的package.json还有以下两个档案：

.gitignore
某档案或是资料夹我不想放在 Git 里面
ex. react预设会设定 /node_modules 资料夹 不要写入git 版控里README.md
开启专案通常会先看README.md这个档案，叙述这个专案的环境建立，与功能介绍。

资料夹

底下有三大资料夹：

node_modulespublicsrc

node_modules

在上一篇有提到，相关的 dependencies 都会放在此资料夹，在执行 create-react-app 或者 npm install 会预设产生这个资料夹。

public

三个图片档 favicon.ico / log192.png / logo512.pngmanifest.json

我第一次听过这个档案名称，查了一下与使用者体验有关係，
可以看到以下截图根据不同萤幕尺寸的装置给予适当的图片大小，也就是 RWD 。还有具备 PWA（Progressive Web App） 功能，意思就是逐步的将网站渐进优化为具备 APP 的优点。

参考连结

index.html

基本上在专案里这个html档案是唯一一个html档案，为了让 React 动态控制专案的 UI。因此会利用id="root"这个节点去渲染我们要的画面。

src (source)

我们大部分时间都会使用src资料夹来操作专案内容。

index.js

这个档案用刚刚所说的 root 节点渲染(render)App component

App.js Component

若仔细看程式码，与yarn start出来的预设画面内容是一致的。而这个App.js组件负责UI介面。

App.test.js

测试档案，负责测试 App.js 内容是否符合预期。

App.css / index.css

这两个档案分别为各自的组件做样式的部分。

serviceworker.js

此档案与 /public/manifest.json 有关係，都是让使用者有 PWA 的使用者体验，这个比较不是我要着墨的地方，所以不多赘述。

重点整理

大部分时间我们都在使用src资料夹只会有一个html档案(index.html)用 index.js 渲染 UI 画面