How to learn React without getting lost
A practical order for learning React: components, then props, then state. You will know what to practice first and what can wait.
What should you learn first in React, if every tutorial seems to start in a different place?
Short answer: components, then props, then state. Effects, data loading, and routing come after those three feel ordinary.
By the end of this post you will have a sensible order for the first weeks, and you will know which names you can ignore until a button or a list actually needs them. New to components? Start with Your First Component (opens in a new tab). If variables and functions in JavaScript are still new, JavaScript Basics (opens in a new tab) is the earlier start.
A component is a function that returns UI
A React component is a function that returns what should appear on the screen. You give it a name, it returns JSX, and React calls it when that part of the page needs to render. That is the whole first idea. Props and state are how information gets into that function. They are not a second language.
function Greeting() {
return <h1>Hello, React</h1>
}Put that function in a file, export it, and you have a piece of UI you can reuse. Practice that until you can write a component without copying a tutorial line by line. The names around it, including useEffect and routers, can wait. They answer later questions.
When you see braces like {title} in JSX, that is JavaScript inside the markup, not a React-only trick. A shaky JavaScript base makes every later lesson feel like a new framework. An hour in JavaScript Basics (opens in a new tab) saves a week of guessing.
Props are how a parent passes data in
Once a component can render, the next job is to reuse it with different data. Props are the arguments. The parent passes them, and the child reads them. The child does not reach up and change the parent's values.
function NoteTitle({ title }) {
return <h2>{title}</h2>
}
function Notes() {
return <NoteTitle title="Grocery list" />
}title is a prop. Notes decides the string. NoteTitle only displays it. That split is why a list of notes can render the same child five times with five different titles. Passing Props (opens in a new tab) stays on this. If you can pass a string and a number down, you know enough props to build a small page.
People get lost here when a tutorial introduces context, reducers, and global stores in the same afternoon. You do not need those to pass a title. Add them when the prop list itself becomes the problem, not before you have felt that problem. The Prop Drilling Problem (opens in a new tab) is where the course gets there.
State is what changes after the page is on screen
Props come from outside. State is data the component itself remembers, such as the text in a box or whether a note is saved. useState gives you the current value and a function that replaces it. When you call that function, React renders again with the new value.
import { useState } from "react"
function NoteButton() {
const [saved, setSaved] = useState(false)
return (
<button onClick={() => setSaved(true)}>
{saved ? "Saved" : "Save"}
</button>
)
}The button starts unsaved. A click stores true. The label changes because the component rendered again, not because you edited the HTML by hand. State With Usestate (opens in a new tab) is the lesson for that. Stay with one or two pieces of state until a click and a text field both feel predictable.
useEffect is the next name people reach for, and it is the one that confuses almost everyone at first. You need it when the component has to do something after it renders, such as loading data. You do not need it to compute a label from state you already have. The guide React useEffect explained is the place for that, after state is comfortable. useState or useReducer is the later choice, when one component's updates get tangled.
A sensible order for the first weeks
This is an order, not a named track. Stop when the current step is still fuzzy, and do not collect lessons you are not using.
- Step 1: one component that returns JSX. No props yet.
- Step 2: a parent that passes a title and a count into a child.
- Step 3: one
useStatevalue and a button that changes it. - Step 4: a list of items, each with a
key, rendered from an array you already have. See Lists And Keys (opens in a new tab). - Step 5:
useEffectonly if something must happen after render, such as a fetch. See Running Code After Render (opens in a new tab).
React Fundamentals (opens in a new tab) is built in that spirit. The Composing Components (opens in a new tab) lesson is where a small app starts to hold more than one component. You can practice each step in the browser, with nothing to install.
Common mistakes
- Starting with a full app tutorial. A router, a database, and three hooks on day one hide the three ideas that actually matter. Build the greeting, then the prop, then the button.
- Skipping JavaScript. Destructuring, arrays, and functions show up in every React file. If those names are new, the React lesson is the wrong room.
- Using
useEffectfor data you already have. If the parent has the title, pass it down as a prop, and work out labels during render. An effect is for syncing with something outside React, such as a network request. - Treating every new hook as required.
useReducer,useContext, anduseMemosolve specific pains. Learn them when you hit the pain, not as a checklist.
Realistic expectations
A weekend can make components and props feel familiar. State usually takes longer, because you are learning when React renders again, not only where to put a variable. Effects take longer still. That pace is normal. A person who can pass props and update one piece of state can already build a small notes page.
Quick recap
- A component is a function that returns UI.
- Props are inputs from the parent. The child reads them.
- State is data the component remembers and can replace.
- Learn effects after state, and only for work that happens after render.
- JavaScript basics are part of the path, not a detour.
Frequently asked questions
What is the best way to learn React as a beginner?
Learn one component, then props, then state, in a course where you write the code yourself. React Fundamentals (opens in a new tab) is that path on start.dev. Add effects when a lesson actually loads data.
Do I need JavaScript before React?
You need enough JavaScript to write a function, read an object, and loop over an array. If that is still new, start with JavaScript Basics (opens in a new tab) and come back. React will not teach those for you.
Should I learn Next.js at the same time?
Not at the start. Next.js assumes you can already write a component, pass props, and keep state. Learn those in React Fundamentals (opens in a new tab) first. The framework questions are easier once those three feel ordinary.
How long does it take to learn React?
Long enough that a weekend of components is a start, not a finish. State and effects take more practice than the first component. Timelines vary, and a certificate is not the same as being comfortable in a codebase.
Practice
Write the greeting component in Your First Component (opens in a new tab), pass a title in Passing Props (opens in a new tab), and add one button in State With Usestate (opens in a new tab). Each lesson runs in the browser, so there is nothing to install.
Keep going
Open Your First Component (opens in a new tab) if you want the first file in front of you. If JavaScript is the part that feels rusty, JavaScript Basics (opens in a new tab) is the right first click.
