1. 脚手架初始化

首先，我们需要使用脚手架工具来初始化一个 React 项目。如果你不熟悉如何使用脚手架，可以简单回顾一下以下步骤：

有时候，初始化过程可能会由于网络问题导致失败。这时候，我们可以使用国内镜像来加速，具体方法可以使用 cnpm 工具来代替 npm。

2. 清空目录

接下来，我们需要清空项目目录，以便于开始我们的实战项目。这里有一个需要注意的细节：

当你在一个 JS 文件中引入一个 CSS 文件，这个样式文件不仅仅在这个 JS 文件有效，在别的组件中也是有效的！例如，即使在 app 组件中也可以使用 index.css 里面的样式。这意味着，如果我们不小心在一个组件中写入的 CSS 样式与其他组件中的样式相互冲突，那么整个应用程序的样式会变得混乱。因此，我们需要一种方法来保证每个组件样式是独立的，不会相互耦合！

3. CSS 带来的问题与解决方法

为了避免组件之间的样式冲突，我们建议使用第三方模块 styled-components 来对样式进行管理。这样，我们可以将样式和组件代码放在同一个文件中，从而使得样式与组件紧密耦合，方便管理和维护。具体的使用方法如下：

首先，我们可以将组件的样式代码放到一个单独的 JS 文件中：

然后，在 index.js 文件中引入该样式文件：

接下来Styled-Component的具体的使用方法可以在下一篇笔记中详细介绍。