本文目标

通过使用脚手架确实让我们很方便的创建一个 React 项目基础代码结构，它为我们生成了默认的文件目录和代码文件，前面的章节已经做过详细的介绍。但为了加深理解，本文带你手写这些文件代码。

其实主要差异就在 src 目录下代码文件的组织方式上

默认文件目录 - 目标文件目录（学习目标）

可以看到二者差异较大，被移除的文件是因为对代码做了精简整理，去掉了我们暂时不需要的代码文件，并且对文件中代码也做了精简，下文会有展示说明。

开发前的准备

将脚手架生成的 public 和 src 目录剪切并移动到备份目录 01_脚手架自带的文件 中，并重新创建 public 和 src 目录。
在这里插入图片描述
此时的 public 和 src 目录都是空目录，接下来我们都在这两个目录中进行实践。

编写主页面 `index.html`

在 public 目录下创建一个 index.html 文件，并写入如下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <title>hello, react 脚手架</title>
  </head>

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

说明：

在 public 目录下放一个 favicon.ico 图标。
index.html 文件中必须包含一个 id 为 root（root 可以自定义其他，保证唯一即可）的 DOM 容器，用来渲染虚拟 DOM。

编写外壳组件 `App.js`

在 src 目录下创建一个 App.js 文件（注意：组件名首字母要大些），并写入如下代码：

import React, { Component } from "react";

export default class App extends Component {
  render() {
    return (
      <div>
        <h2>Hello, React! </h2>
      </div>
    );
  }
}

编写入口文件 `index.js`

在 src 目录下创建一个 index.js 文件，并写入如下代码：

// 引入 react 核心库
import React from "react";
// 引入ReactDOM
import ReactDOM from "react-dom";
// 引入组件
import App from "./App";

// 渲染App组件到页面
ReactDOM.render(<App />, document.getElementById("root"));

代码组件化

在 src 目录下创建一个 components 目录，用来存放业务组件。

开发 Hello 组件

在 components 目录下创建一个 Hello 目录，并在 Hello 目录下创建 index.jsx 和 index.css 文件。

index.css 代码如下：

.title {
  background-color: red;
}

index.jsx 代码如下：

import React, { Component } from "react";
import "./index.css";

export default class Hello extends Component {
  render() {
    return <h2 className="title">Hello Component</h2>;
  }
}

开发 Welcome 组件

在 components 目录下创建一个 Welcome 目录，并在 Welcome 目录下创建 index.jsx 和 index.css 文件。

index.css 代码如下：

.title {
  background-color: blue;
}

index.jsx 代码如下：

import React, { Component } from "react";
import "./index.css";

export default class Welcome extends Component {
  render() {
    return <h2 className="title">Welcome Component</h2>;
  }
}

引用组件

将 Hello 组件和 Welcome 组件导入到外壳组件 App.js 中，并引用。

此时 App.js 的代码如下：

import React, { Component } from "react";
import Hello from "./components/Hello";
import Welcome from "./components/Welcome";

export default class App extends Component {
  render() {
    return (
      <div>
        <Hello />
        <Welcome />
      </div>
    );
  }
}

组件化实现效果

在这里插入图片描述

组件渲染成功，浏览器控制台无报错，但是有个问题，Hello 组件的样式丢失了，准确的讲是被覆盖了。为什么？怎么解决？请看下面的章节《样式模块化》。

样式的模块化

带着问题来说明，上面组件化章节，Hello 组件的红色背景样式被 Welcome 组件的蓝色背景样式覆盖了，是因为 Hello 组件和 Welcome组件的 CSS 样式使用了同名类式选择器 .title，而且 App.js 组件代码中先导入 Hello 组件，后导入 Welcome 组件，后导入的组件样式覆盖了先导入的组件样式，才出现了上面的问题。

那么如何解决？两种解决方式：

使用 Less 的样式嵌套，此处不做详细介绍，后须文章再做详细介绍。基础代码如下：

 .hello {
   .title {
     background-color: red;
   }
 }

 .welcome {
   .title {
     background-color: blue;
   }
 }

使用文件名 module 方式，进行样式模块化

将 Hello 组件的 index.css 样式文件重命名为 index.module.css，然后修改 Hello 组件 index.jsx 中样式引入方式，修改后的代码如下：

import React, { Component } from "react";
import Style from "./index.module.css";

export default class Hello extends Component {
  render() {
    return <h2 className={Style.title}>Hello Component</h2>;
  }
}

此时效果如下：
在这里插入图片描述