Want a new VS Code theme?

Don't use complicated examples

A good example conveys a concept as efficiently as possible.

For instance, if I need to explain how to wire up a certain behavior on React input fields, I’ll make a form out of only input fields. I won’t add labels or a submit button because they’ll only detract from the example. In other words, I’d rather use this as an example:

function Form () {
  const firstName = useSomeFunctionality();
  const lastName = useSomeFunctionality();

  return (
    <form>
      <input {...firstName} />
      <input {...lastName} />
    </form>
  );
}

…than this:

function Form () {
  const firstName = useSomeFunctionality();
  const lastName = useSomeFunctionality();

  const handleSubmit = e => {
    e.preventDefault();
    console.log("Event details", e);
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">First name</label>
        <input {...firstName} id="firstName" />
      </div>

      <div>
        <label htmlFor="lastName">Last name</label>
        <input {...lastName} id="lastName" />
      </div>

      <div>
        <button>Submit</button>
      </div>
    </form>
  );
}

The second one is more realistic, but there’s too much going on inside it. If you’re a student who’s trying to understand something new, I want to show you the most important parts – not the unnecessary cruft. My goal is to help you understand essential concepts, because once you understand them, you’ll have a much easier time branching out to harder things.