今日文章目录

• 资料夹结构概述
• 参考资料

今天写一点我对 React资料结构的基础了解，在写React的时候，稍微知道自己在干嘛。
(如果我有理解错误，拜托请告诉我)

资料夹结构概述

├── node_modules
├── public
│   └──  index.html
│
├── src
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── index.jsx
│
├── .gitignore
├── package.json
├── yarn.lock
└── README.md

node_modules

放置目前专案内会用到的所有载入的套件，由於档案庞大，这个资料夹git并不会追踪(建置在.gitignore)。

public

所有静态页面放置区，包含目前看到的index.html、LOGO，或者提供给使用者下载的静态范例档等，都可以放置在这里。

• 在index.html: React官网一点开，开宗明义就写了React是「用来实作使用者介面的 JavaScript 函式库」。既然上面都说了是public资料夹是放置静态页面，就表示不会在index.html内撰写JS(我这里指的整个专案都使用React的情况)。内容只有一段：

  <div id="root"></div>

浏览器在渲染网页画面的时候，会把HTML解析成DOM(Document Object Model)。如果你理解DOM的概念，那麽这里的 root也有类似的概念。作为 React DOM root，所有在 root内的 element 都会交给React DOM管辖。

但别搞混，brower DOM ≠ React DOM！

节录官网片段
Unlike browser DOM elements, React elements are plain objects.
React DOM takes care of updating the DOM to match the React elements.

src

所有React进行的操作，都会放在这个资料内。

• App.jsx : 我通常会把 App.jsx 当作 所有 components 的集散地，比如有主要Router的设置。
• index.jsx : 所有 Javascript 至 显示画面(public/index.html)的接口。
  在这里，我们透过 ReactDOM.render(element, container)，把要渲染的画面，塞进 root节点。

// index.jsx
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

.gitignore

纪录所有不需要git追踪的档案名称。

package.json

纪录所有专案使用的套件与套件版本。刚刚提到，node_modules并不受git追踪，代表每一次从远端提取最新进度时，不包含node_modules资料夹。这时候就需要 package.json内的套件纪录，搭配指令yarn install重新载入所有套件与对应版本，重新产生node_modules资料夹。

yarn.lock

纪录所有专案使用的套件与套件本身所有依赖版本。与package.json不同的是：

1. package.json资料可以手动修改 ; yarn.lock不行修改。

   • 代表yarn install套件载入的版本是可以在package.json手动指定。
   • 只要执行 yarn 指令，yarn.lock档案内容会自动更新。

2. yarn.lock 纪录该专案使用套件所有依赖 ; 而package.json只有纪录专案载入的该套件。

我们来举个例子：

• 这是目前专案的package.json snippet，里面纪录的依赖有 antd react react-dom ...等等。

{
  "name": "pomodoro-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^4.16.13",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  
  ...
}

我们就以这次会使用到的UI套件antd为例，从 node_modules 资料夹可以看到，antd本身也有自己的package.json，里面纪录了antd套件内需要用到的依赖：

这就表示，如果我要使用antd，就要把它需要的相关依赖都装上，才能确保使用的时候不出错，而在执行 yarn install 时，就会把需要的一起装好，很方便。

但是回到专案的package.json，里面只有纪录 "antd": "^4.16.13"，其他相关依赖都没写，如果哪天依赖升级，导致我的专案坏掉，我哪知道到底是哪个依赖出了问题？

所以就有了yarn.lock，这里面除了纪录antd确切载入版本之外，相关依赖也都有纪录，我们就可以藉由yarn.lock里面纪录的所有依赖版本，来拯救我的专案。

(补充) 版本号意思

主版本号.次版本号.修订版本号major.minor.build

• 大版本号: 重大更新使用

• 中版本号: 更新使用，比如：新增功能。

• 小版本号: 修正错误使用

• 版本号前面常见符号：

  • ^: 更新版本以大版本号不动，接受中、小版本号更新。
  • ~: 更新版本以中版本号不动，接受小版本号更新。

参考资料

-React 官网
-React render()
-yarn lock
-版本编号的命名规则