Skip to content
ReactField

Getting StartedBeginner

React Fundamentals: Components, Hooks, State, and Effects

React fundamentals for production work: components, hooks, state, effects, guided paths, and modern server-first ideas.

Mohamed ElshahawyPublished Apr 2026Updated Oct 2026
4 min read

What you'll learn

  • Short learning paths for new React, TypeScript, modern React and re-renders
  • Match a blocker like effect bugs or RSC confusion to the right resource
  • JavaScript and TypeScript foundations that make React easier
  • Must-know React concepts plus modern server-first ideas

React sits on JavaScript. TypeScript makes the data shapes you already keep in your head into rules the compiler can check. Skip the foundations and every hook tutorial feels magical. Build them and the docs start to read like a handbook instead of a puzzle.

Prefer free official docs when they cover the ground. Use courses for practice. Use this page to pick an order, not to collect twenty tabs.

A person placing an orange React block on top of foundation blocks labelled JavaScript and TypeScript
React sits on top of JavaScript and TypeScript. Solid foundations make the rest easier.

How to use this page

  1. Pick a path if you know your goal.
  2. Match a blocker if you only know what hurts.
  3. Stay with react.dev as the source of truth for APIs.
  4. Apply one idea each week in a real component before opening another course.

For books that go deeper than a tutorial, see Books & Reading. For hook details after the basics, see Proficiency with Hooks.

Pick a learning path

Four short learning paths branching from a React foundation block
Short paths beat endless bookmark lists.

Try it: fundamentals path picker

Pick where you are starting. You get a short path, why that order works, and one first-week action.

Your path

Docs first, then practice

Official Learn covers the mental model. A short interactive course then locks in components, state and events.

  1. React docs (Learn)

    Current source of truth for how React works.

  2. Thinking in React

    The product-to-component workflow.

  3. Scrimba Learn React

    Interactive practice if you want guided reps.

  4. Managing State

    Local state before any global store.

First week

Finish the React Learn quick start and Thinking in React. Build one tiny app with only components and state.

Finish the first item before opening the next. The catalog below still has more JS, TS and course links when you need them.

Checkpoint

You are new to React and have not read the official Learn section. What should you open first?

Match a learning blocker

Four blocker labels connected to resource cards on a shelf
Start from the blocker, then open one primary resource.

Try it: match a blocker

Choose what is blocking you. The matcher points to one primary resource and an optional second stop.

The blocker

useEffect loops, missing dependencies or syncing server data in effects that should not run that way.

Start here

A Complete Guide to useEffect

Still the deepest explanation of what effects are for and what they are not.

Also consider

Proficiency with Hooks

Our hooks article for day-to-day patterns after the mental model clicks.

One article will not replace practice. Apply the idea in a small branch the same week you read it.

Key takeaway

When stuck, name the blocker in one sentence. Searching for that sentence beats opening five unrelated tutorials.

JavaScript and TypeScript

JavaScript

TypeScript

A JavaScript developer can pick up TypeScript basics quickly. The real win is removing a class of cannot read property of undefined bugs by making data shapes explicit.

Adopt TypeScript incrementally. You do not need to halt product work to learn every generic.

Applying JS to React

Brush up on events, promises and arrays before advanced React patterns.

JavaScript event promise and array tiles flowing into a React component card
Events, async work and arrays show up inside almost every React feature.

React concepts you must know

JSX is a declarative way to describe UI. React lets you ignore much of the raw DOM API for rendering.

Mental-model reading:

Modern React in 2026

If you learned React in the CRA and client-only era, the biggest shift is this: React is often server-first, with client interactivity layered where needed.

Key ideas:

  • Server Components move non-interactive rendering and data work off the client bundle.
  • Server Actions run mutations on the server from forms and components with less custom API glue.
  • Streaming and Suspense show useful HTML early while slower parts continue.
  • Selective client boundaries keep "use client" only where the browser must interact.
  • React Compiler direction aims to automate more memoization over time.

Recommended reading:

Server and client layers with a streaming bar between them and an orange interactive island
Server-first rendering with small client islands is the common modern shape.

Understanding rendering

Many newcomers think performance only means fewer re-renders. Mastery means knowing when and why renders happen.

Checkpoint

What is the biggest mindset shift from CRA-era React to modern React?

Courses and tutorials

Prefer resources that stay updated for current React.

Video courses

Interactive / free-first

How to choose quickly: beginners start with docs plus Scrimba; TypeScript-heavy teams add Total TypeScript; production depth comes from Epic React and ReactField's performance topics.

The key habit

Docs first, one path at a time, apply before you collect another course.

Fundamentals checklist

  • I can explain components, props and state without a tutorial open
  • I know when an effect is the wrong tool
  • I can describe render and commit in plain words
  • I know what Server Components change compared to CRA-era React
  • TypeScript is helping on at least one shared module
  • I finished one learning item before starting three more

Further reading

Conclusion

Fundamentals are not a badge. They are the difference between copying patterns and choosing them.

Pick a path. Clear one blocker. Keep react.dev nearby.

The key takeaway

Build JavaScript and TypeScript foundations, learn React from the official docs, then specialize. Short paths beat long wish lists.

Check your understanding

Test yourself6 questionsQuestion 1 of 6

What should a brand-new React learner open first?

Recap

What to remember from this article

Sections read

0

Questions

0

none answered yet

Quiz

0

not taken yet

Up next: Project Standards · 15 min

Continue