1. Chuẩn bị giao diện thực hành (ok)

C:\Users\Administrator\Desktop\fusejs\src\App.js

import React, { useState } from 'react';
import './App.css';
import Fuse from 'fuse.js';
import characters from './characters.json';
function App() {
  return (
    <>
      <header className="App-header">
        <div className="container">
          <h1>Futurama Characters</h1>
        </div>
      </header>
      <main className="container">
        <ul className="characters">
          <li className="character">
            <span className="character-thumb"></span>
            <ul className="character-meta">
              <li><strong>Name:</strong> Philip J. Fry</li>
              <li><strong>Company:</strong> Planet Express</li>
              <li><strong>Species:</strong> human</li>
            </ul>
          </li>
          <li className="character">
            <span className="character-thumb"></span>
            <ul className="character-meta">
              <li><strong>Name:</strong> Philip J. Fry</li>
              <li><strong>Company:</strong> Planet Express</li>
              <li><strong>Species:</strong> human</li>
            </ul>
          </li>
        </ul>
        <aside>
          <form className="search">
            <label>Search</label>
            <input type="text" />
          </form>
        </aside>
      </main>
      <footer>
        <div className="container">
          <p>
            Images from <a href="http://www.cc.com/shows/futurama">Futurama</a> via <a href="https://futurama.fandom.com/">futurama.fandom.com</a>
          </p>
        </div>
      </footer>
    </>
  )
}
export default App;

C:\Users\Administrator\Desktop\fusejs\src\App.css

@import url('https://fonts.googleapis.com/css2?family=Hind:wght@600;700&display=swap');
* {
  box-sizing: border-box;
}
.container {
  max-width: 50em;
  margin: 0 auto;
}
header {
  background: linear-gradient(to bottom, #5e1dec, #0298d5);
  padding: 2em 0;
  margin-bottom: 3em;
}
h1 {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-size: 4em;
  font-weight: 700;
  color: white;
  font-family: 'Hind', sans-serif;
  margin: 0;
}
@media only screen and (max-width: 50em) {
  h1 {
    font-size: 7vw;
  }
}
main {
  display: flex;
  padding: 0 1em;
}
@media only screen and (max-width: 40em) {
  main {
    flex-direction: column-reverse;
  }
}
aside {
  width: 15em;
}
@media only screen and (max-width: 40em) {
  aside {
    width: 100%;
    margin-bottom: 2em;
  }
}
.characters,
.character-meta {
  list-style: none;
  padding: 0;
  margin: 0;
}
.characters {
  flex-grow: 1;
}
.character {
  display: flex;
  margin-bottom: 1em;
}
.character-thumb {
  width: 4em;
  height: 4em;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  border-radius: .4em;
  margin-right: .6em;
  background-image:url('http://localhost:3000/images/Philip-J-Fry.png');
}
.character-meta li {
  margin-bottom: .2em;
}
.character-meta li:last-child {
  margin-bottom: 0;
}
.search label {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  font-family: 'Hind', sans-serif;
  text-transform: uppercase;
  margin-bottom: .2em;
}
.search input {
  width: 100%;
  font-size: 1em;
  background: none;
  padding: .8em 1em;
  border: solid 3px #5F4B8B;
  outline: none;
  border-radius: .4em;
}
.search input:focus {
  border: solid 3px #5e1dec;
  box-shadow: 0 0 6px #5e1dec;
}
footer {
  color: white;
  text-align: center;
  background-color: #5e1dec;
  padding: 1em 0;
  margin-top: 2em;
}
footer p {
  margin: 0;
}
footer a {
  color: white;
}

C:\Users\Administrator\Desktop\fusejs\package.json

{
  "name": "fusejs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "fuse.js": "^6.4.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

C:\Users\Administrator\Desktop\fusejs\public\images

2MB

images.rar