Creating a new react app

npx create-react-app PROJECT NAME // make sure node is installed and go to the folder you want to create the project

// go to the created project directory
npm start

useEffect(() => {
    console.log(`Its ${emotion} right now.`);
  }, [emotion]) // if the 2nd argument is gone( the array), the effect happens eveytime the emotion changes.
//If we put the [] and leave it blank, the effect only happens once
// if we put a variable inside, it is listening to the change of the variable and will execute every time there is a change on the variable emotion. It is called the dependency array.

// creating a checkbox with useState
function App() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="App">
      <input type="checkbox" value={checked} onChange={ () => setChecked(!checked)}/>
      <label>{checked ? "checked": "unchecked"}</label>
    </div>
  );
}

// Creating a checkbox with useEffect
function App() {
  const [checked, setChecked] = useReducer((checked) =>(!checked), false);

  return (
    <div className="App">
      <input type="checkbox" value={checked} onChange={setChecked}/>
      <label>{checked ? "checked": "unchecked"}</label>
    </div>
  );
}