上一节，我们使用 create-react-app 生成示例程序的代码，这一节我们详细介绍下如何进行修改代码
看了一些 React 的书籍，其实 React 使用 JSX 语法，将程序的模块化和抽象做的很好。
我们新建立的程序的目录如下
1moz-todo-react
2├── README.md
3├── node_modules
4├── package.json
5├── package-lock.json
6├── .gitignore
7├── public
8│ ├── favicon.ico
9│ ├── index.html
10│ ├── logo192.png
11│ ├── logo512.png
12│ ├── manifest.json
13│ └── robots.txt
14└── src
15 ├── App.css
16 ├── App.js
17 ├── App.test.js
18 ├── index.css
19 ├── index.js
20 ├── logo.svg
21 ├── reportWebVitals.js
22 └── setupTests.js
关于目录结构的表述我这里直接引用 Mozilla 的描述
目录 src 是我们花费时间最多的地方，因为它是我们 React 应用源码存放的目录。
目录 public 包含了开发应用时浏览器会读取的文件，其中最重要的就是 index.html。React 将目录 src 中的代码嵌入这个文件，从而浏览器才能运行此文件。 index.html 中的有些内容关乎 create-react-app 的运作，因此除非你知道自己在做什么样的修改，否则不建议编辑这个文件。当然，你可以修改 index.html 中的 元素的内容来表现此应用程序通俗易懂的名称。
package.json 与 react 工程并无直接关联，这个是 node modules 的管理的文件。其他的 node 版本管理的软件都会有这个文件。
React 中最小的就是组件，那何为组件呢，组件的大小如何界定呢？
何为组件
组件是组成应用程序的最小单元，使用组件可以大大减轻软件开发的工作，提高软件开发的效率，一般组件是实现单一功能的
下面以《深入 React 技术栈》中的例子为例讲述组件元素的构建
下面是一个带有 btn btn-blue 的按钮，且其中有 em 元素,且其中有字符串 Confirm
1<button class="btn btn-blue">
2 <em>Confirm</em>
3</button>
若转移为 Json 对象如下
1{
2 type: 'button',
3 props: {
4 className: 'btn btn-blue',
5 children: [{
6 type: 'em',
7 props: {
8 children: 'Confirm'
9 }
10 }]
11 }
12}
转移为组件元素封装
1const Button = ({color,text}) =>{
2 return {
3 type: 'button',
4 props: {
5 className: `btn btn - $ {
6 color
7 }`,
8 children: {
9 type: 'em',
10 props: {
11 children: text,
12 },
13 },
14 },
15 };
16}
由此我们就有了第一个组件 Button
参考
- https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
- 《深入 React 技术栈》