React 基础二：目录结构、命名、创建 react apps 步骤

这些内容是我学习 《fullstack-react-book》 一书，自己翻译整理出来的要点。

目录结构

1. 当你浏览一个网站， assets 目录存放的是你浏览器下载的，并且用来展示页面的文件。

2. 浏览器在解析 index.html 文件的时候，该文件其内部的 标签内的代码具体说明了需要浏览器从服务器下载哪些额外的文件。

命名组件

1. 如何命名组件完全取决于你的喜好。但是，命名时围绕着语义，保持一些一致的规则，将会极大地提高代码的可读性。

创建 React apps 的步骤

1. 事实上，每一个 react 应用都可以按照以下步骤来开发：

   1. 将 app 解构成组件：

      1. 当拿到一个 app 设计稿时，我们基本上能从视觉上将 app 分成几个 react 组件。
      2. 最小职责原则：在理想的情况下，每个组件应该各自负责一块功能。这种职责界定法，不仅能让每个组件非常简单明了，还改善了可复用性。

   2. 创建一个静态的 app 页面：

      1. 在 react 中给表单元素设置默认值，用的是 defaultValue 属性。
      2. 那些最底层的组件，也就是我们通常所说的“叶根组件”，它们担负起了页面上的大部分 HTML 结构。这是些最根本的组件。所有基于“叶根组件”的组件都应该是被精心设计过的。

   3. 分别哪些变量应该是状态化的：

      1. 如果一个属性是通过 props 从父级组件那儿传递值过来的，那它一般不应该状态化。
      2. 如果一个属性会随着时间而改变，那他基本上是需要状态化的数据！这是评判一个属性是否为状态化数据的一条关键标准。
      3. 如果一个属性能够通过其他 props 或 state 计算得出，那它肯定不是 state 。为了简单考虑，我们尽可能描述最少的 state 值。

   4. 考察每个 state 变量应该放在哪个组件中：

      1. 对于每一个 state 值，我们都应该从以下几个方面来考量它属于哪个组件：
         
         • 确认每个组件在渲染一些结构的时候是基于这个 state 值的。
         • 找到所有需要这个 state 值的组件，并且在 DOM 树找到这些组件的公共父级。
         • 无论是公共父级，还是在 DOM 树中更高级别的父级，都应该拥有这个state值。
         • 如果，在 DOM 树中你找不到公共父级去拥有这个 state 值，那就请创建一个囊括了所有需要这个 state 值的新组件，这个新组件拥有这个 state 值。

   5. 硬编码初始的 state 值

      1. 对于 react 中的 id 值，我们使用已经在 index.html 中加载的 UUID 这个库。我们使用 uuid.v4() 为每一个项目随机生成一个通用的独一无二的识别码 （Universally Unique IDentifier） 。
      2. 使用 id 属性来判断一个对象是否已经创建是一种通用的做法。
      3. 单向数据管道 （one-way data pipeline）：如果 state 值更新了，组件通过调用 render() 方法让相应的 state 值重新渲染。这会相应地触发它的子组件及孙子级组件等等后辈组件重新渲染。

   6. 增加相反的数据流

   7. 增加页面与服务器的交互