jsToReact

JavaScript you actually need for React.

Learn the idea. Play with it. Break it. Use it in React. Build something real.

jsToReact is a practical learning path that teaches the JavaScript that shows up in real React code, then uses it to build a small issue tracker called TinyBoard from scratch.

No JavaScript encyclopedia. No React crash course. Just the parts that matter, in the order they matter.

Who this is for

You're comfortable with HTML and CSS. You know what a variable and a function are. You want to build React apps without spending weeks memorizing syntax you won't use for a long time.

What makes it different

Most learning material is either a wall of API docs or a tiny "build a counter" demo.

This path is built around one idea:

understand one concept
        ↓
try a tiny example
        ↓
predict the result
        ↓
do a small exercise
        ↓
connect it to React
        ↓
add it to TinyBoard

You don't collect knowledge. You build a thing.

The project: TinyBoard

You start with a few plain JavaScript objects. By the end, you have a working issue tracker with:

• reusable React components
• create, edit, and delete flows
• search, filters, and sorting
• forms with validation
• local persistence
• URL routing
• custom hooks
• behavior tests
• keyboard shortcuts and accessible UI

The finished version lives in app/. You build your own in sandbox/.

The finished version is a reference, not a thing to copy from. If you're stuck for a while, sure, look. But make sure you understand what you copied before moving on.

Where to start

Read START-HERE.md. Then LEARNING-MAP.md for the full path.

Learning map (compact)

Part 1 — JavaScript you'll actually use

1. Values, variables and data
2. Functions, parameters and return
3. Arrays, objects and data shape
4. Arrow functions and callbacks
5. Destructuring and defaults
6. map, filter, find, some
7. Conditions you'll use in UI code
8. Spread, references and immutability
9. Modules: import and export
10. Async JavaScript, fetch and errors

Part 2 — React without magic

11. What React is actually doing
12. Components and JSX
13. Props and one-way data flow
14. Events and event handlers
15. State and useState
16. Rendering lists and using keys
17. Forms and controlled inputs
18. Updating arrays and objects in state
19. Derived data and better state design
20. Sharing state and component composition
21. Refs and the DOM escape hatch
22. Effects: when you need them and when you don't
23. Routing and URL parameters
24. Reusable logic with custom hooks
25. Loading, error and empty states
26. Testing behavior instead of implementation
27. Accessibility, debugging and cleanup

Each lesson is small. Most take 20–40 minutes if you actually do the exercises.

Setup

You need Node.js 22.12 or newer.

node --version

Clone the repo, then install in the two project folders:

cd sandbox
npm install

cd ../app
npm install

You'll only install once per folder.

Useful commands

In sandbox/ and app/:

npm run dev        # start the dev server
npm run build      # production build
npm run test       # run the tests once
npm run test:watch # run tests in watch mode
npm run lint       # check for lint errors
npm run format     # format with Prettier

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

node challenge.js

Repository structure

README.md              # this file
START-HERE.md          # read this first
LEARNING-MAP.md        # the full path at a glance
PROJECT-JOURNEY.md     # what TinyBoard looks like at each checkpoint
HOW-TO-THINK.md        # a few mental models worth keeping
WHAT-NOT-TO-LEARN-YET.md  # topics you can safely skip for now
REFERENCE-NOTES.md     # choices the reference app makes and why
BONUS.md               # where to go after the core path

lessons/               # 27 lessons, each with README + EXERCISES + challenge + solution
sandbox/               # your TinyBoard, starts almost empty
app/                   # the finished reference TinyBoard

A note on AI

This path was written by a developer for a friend, not generated to fill a course template. The lessons try to explain the parts that actually trip people up, in the order they trip them up, and to be honest about what's worth learning now versus later.

If a section feels like it's hedging or repeating itself, that's intentional. Some ideas need to be said more than once before they stick.

Contributing / personal use

This is a personal learning repo. Fork it, change the order, replace TinyBoard with your own project idea. The point is the path, not the specific app.