开发前的准备

目标实现页面效果, 及组件拆分，如下图所示
组件代码结构规划
外部资源准备
- 引入第三方样式 bootstrap CSS 样式库
  bootstrap 官网有 v3、v4、v5 三个版本，本文使用的 v3 版本的样式，可行去到 bootstrap 官网 https://www.bootcss.com/ 下载。
  也可以直接到我的百度网盘直接下载。
- 案例中用到动态头像，引入了一个第三方在线生成头像的免费 API，如需要请访问：http://api.btstu.cn/doc/sjtx.php

实现组件静态代码

把 bootstap 样式作为全局样式引入，具体实现方式就是把 bootstrap 样式文件放到 public 目录中的 css 目录下，然后在 index.html 中通过 link 标签引入即可。
```
// file: public/index.html

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <title>hello, react 脚手架</title>
</head>
```
做完这一步，在本应用中所有组件中，如果我们没有为其单独设置样式，那他都会使用 bootstrap 样式。

Search 组件
Search 组件的核心就是一个搜索表单。给用户提供搜索关键词的输入接口。

// file: src/components/Search/index.jsx

import React, { Component } from "react";

export default class Search extends Component {
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索 Github 用户</h3>
        <div>
          <input type="text" placeholder="输入关键词点击搜索" />
          &nbsp;
          <button>搜索</button>
        </div>
      </section>
    );
  }
}

List 组件
List 组件是一个用户列表，用来展示搜索结果。

// file: src/components/List/index.jsx

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

export default class List extends Component {
  render() {
    return (
      <div className="row">
        <div className="card">
          <a href="https://www.51blog.xyz" target="_blank" rel="noreferrer">
            <img
              src="http://api.btstu.cn/sjtx/api.php?lx=a1&format=images"
              style={{ width: "100px" }}
              alt="avatar"
            />
          </a>
          <p className="card-text">reactjs</p>
        </div>
        <div className="card">
          <a href="https://www.51blog.xyz" target="_blank" rel="noreferrer">
            <img
              src="http://api.btstu.cn/sjtx/api.php?lx=b1&format=images"
              style={{ width: "100px" }}
              alt=""
            />
          </a>
          <p className="card-text">reactjs</p>
        </div>
        <div className="card">
          <a href="https://www.51blog.xyz" target="_blank" rel="noreferrer">
            <img
              src="http://api.btstu.cn/sjtx/api.php?lx=c1&format=images"
              style={{ width: "100px" }}
              alt=""
            />
          </a>
          <p className="card-text">reactjs</p>
        </div>
        <div className="card">
          <a href="https://www.51blog.xyz" target="_blank" rel="noreferrer">
            <img
              src="http://api.btstu.cn/sjtx/api.php?lx=c2&format=images"
              style={{ width: "100px" }}
              alt=""
            />
          </a>
          <p className="card-text">reactjs</p>
        </div>
        <div className="card">
          <a href="https://www.51blog.xyz" target="_blank" rel="noreferrer">
            <img
              src="http://api.btstu.cn/sjtx/api.php?lx=c3&format=images"
              style={{ width: "100px" }}
              alt=""
            />
          </a>
          <p className="card-text">reactjs</p>
        </div>
      </div>
    );
  }
}

注意事项

<a> 标签用到了 target="_bank"属性，就必须增加一个属性 rel="noreferrer";
<img> 标签必须要有 alt属性；
注意 className 和 style 的书写形式。

List 组件样式：

// file: src/components/List/index.css

.album {
  min-height: 50rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}

App 组件
整合调用 Search 和 List 组件。

// file: src/App.js
import React, { Component } from "react";
import Search from "./components/Search";
import List from "./components/List";

export default class App extends Component {
  render() {
    return (
      <div className="container">
        <Search />
        <List />
      </div>
    );
  }
}