Skip to content

START-HERE.md

Latest commit

 

History

History
96 lines (57 loc) · 2.38 KB

START-HERE.md

File metadata and controls

96 lines (57 loc) · 2.38 KB
Raw

Hey, start here

I put this repo together so you can learn the JavaScript that actually shows up when you build React apps, and then use it immediately instead of collecting syntax in your head.

A couple of things before you start.

Before you run anything

You need a recent Node.js version.

node --version

Use Node 22.12 or newer for this repo.

You also need a code editor. VS Code is completely fine.

You do not need to install React globally.

Don't race through it

If you can copy an example but you can't explain what the data is doing, you're not done with that part yet.

The goal isn't:

"I finished 8 lessons today."

The goal is more like:

"If I see this again tomorrow, I know what problem it solves."

That's why each lesson starts with the idea, not the syntax.

The repo has two apps

sandbox/

This one is yours.

It starts small and you build TinyBoard here while you go through the lessons. Break it, rename things, make ugly versions, console.log everything. That's what it's for.

app/

This is the finished reference version.

Try not to copy from it immediately. If you're stuck for 20 minutes and you've actually tried, then sure, look at it. Just make sure you understand what you copied before moving on.

How to do a lesson

You don't need a complicated routine.

  1. Read the explanation.
  2. Close the file for a second and explain the main idea in your own words.
  3. Do the tiny exercises.
  4. Do the challenge without opening solution.*.
  5. Do the TinyBoard build step.
  6. If something feels fuzzy, stay there a bit longer.

That's it.

Run the sandbox

cd sandbox
npm install
npm run dev

You'll only need to install once.

For JavaScript lessons 01–10, you can run a challenge directly:

node challenge.js

For React lessons, use the challenge as a small component exercise and try it inside your sandbox. The solution.jsx file is there when you genuinely need to compare.

One rule that will save you a lot of time

Don't memorize code you can look up.

Try to understand these instead:

  • what data do I have?
  • what shape is it?
  • what do I want to get back?
  • who owns this state?
  • what should happen when the user does something?
  • does this value need to be state at all?

If those questions start feeling normal, React gets much easier.

Go to LEARNING-MAP.md and start at lesson 01.