app.js

import { useState, useEffect } from "react";
import Button from "./Button";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  console.log("run all the time");
  useEffect(() => {
    console.log("CALL API...");
  }, []);
  useEffect(() => {
    if (keyword !== "" && keyword.length > 2) {
      console.log("SEARCH FOR", keyword);
    }
  }, [keyword]);
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
      <Button text={"button test"} />
    </div>
  );
}

export default App;

Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({text}) {
    return <button className={styles.btn}>{text}</button>;
}

Button.propTypes = {
    text: PropTypes.string.isRequired,
}

export default Button;

Button.module.css

.btn {
    color: white;
    background-color: gray;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

https://github.com/nomadcoders/react-for-beginners/commit/956e2ecaba1b0edd15282e7348fe81a667707065