挑战 React 第六篇

前情提要：若还没有尝试用 create-react-app，建议先去看安装React 第三篇文章。

资料夹结构介绍

若第一次写React，看到这么多档案多多少少会想说我要从哪里看起，此篇会带读者一步一步理解。

首先我们来看看什么是 package.json?

package.json

它是一种 CommonJS 规定用来描述包的文件，包含 json 格式的说明文件，可以定义应用程式名称、版本、脚本...等等。
详细内容可查看官网解说

对我来说的作用：

文件里面可定义相依的相关套件以及应用程式的资讯查看依赖相关套件使用版本有效管理载入套件

package.json - scripts

有人会好奇用create-react-app安装完后，出现 yarn start和yarn build指令从哪里来的吗？

package.json 档案里的scripts执行的脚本是本地项目内node_modules-> .bin内的脚本

因此到 /node_modules/.bin/底下可以找到 package.json 里定义的scripts

刚刚的执行档连结到 react-scripts资料夹底下，因此看以下截图就可以了解 package.json 底下的 script 是从哪里执行的了！

package.json - dependencies

写 React 必定要使用的两个模组React和 React-dom，而create-react-app帮我们快速建立好所需要的模组，若不是下这个语法，就要手动自己安装。

npm install react --save
npm install react-dom --save

学习心得

本来想用一篇写完资料夹结构，但一直不懂什么是package.json，所以不小心就变成了一篇文章。
原本只了解该档案有安装一些套件跟对应的版本号，透过这次稍微浅浅的研究加上整理文章更理解这个档案帮我解决了什么事情。