GuideBeginner
React Fundamentals
Learn React's mental model: building interfaces as a function of state. The guide covers thinking in components and composition, JSX and rendering (including lists and why `key` matters), state with `useState` — and why it's a snapshot per render, not a value that updates instantly — events and handlers, derived versus stored state, effects for syncing with external systems, and how to lift shared state up to the common ancestor. The core idea is that the UI is a function of state: you describe what it looks like for a given state, and React handles updating the DOM when that state changes. Each module runs the pure logic behind React in Node.js — derived filtering and sorting, the cart reducer, a mini render-to-string, the render-commit-effect order — to verify the reasoning without depending on a browser. The throughline is Mercado's storefront: you break it down into components, add search with derived state, a cart with lifted state and a reducer, and an effect that loads the products. It's the core of NIEVA's Fullstack ecosystem, building on the HTML and CSS foundation.
- 64
- lessons
- 8
- modules
- English · Spanish
- available in
- Yes
- certificate
- Free
- access
Outcomes
What you'll be able to do
- Break an interface down into components and compose them, with props flowing downward
- Write real JSX: expressions, attributes, conditional rendering, lists with `map`, and why `key` matters (stable identity, not the index)
- Manage local state with `useState` and understand why state is a snapshot of the render, not a value that updates instantly
- Respond to events (`onClick`, `onChange`) and pass data upward with callbacks
- Derive state instead of storing it: compute filtering and sorting on each render instead of syncing them by hand
- Sync with external systems using `useEffect`: the dependency array, cleanup, and when NOT to use an effect
- Lift shared state up to the common ancestor and prefer composition over prop drilling
- Build Mercado's full storefront: a product list with search, a cart with a reducer, and state lifted into the root component
Before you start
What you need to bring
It's for you if...
- Developers with solid JavaScript who want to learn React from the correct mental model, not by memorizing loose hooks
- Those coming from HTML and CSS looking for the natural next step toward interactive interfaces
- Devs who already "use" React but don't understand why it re-renders, why lists need `key`, or why derived state shouldn't be stored
- Those preparing for Next.js, global state, or design systems who need the component fundamentals first
Requirements and materials
- Comfortable with JavaScript ES6+ (functions, arrays, destructuring, modules)
- Basic HTML and CSS, or having completed the Web Fundamentals: HTML and CSS Guide
- Node.js installed to run each module's pure logic
- No prior React knowledge required
Content
The syllabus, module by module
Open any of them to see its lessons.
- Module introduction: the UI as a function of the data
- What a component is
- The UI as a function of the props: `UI = f(props)`
- Decomposing the storefront into components
- Composing: components inside components
- Props flow downward
- Why decompose: reuse, isolate, reason
- Mini-project: build Mercado's static storefront
- Module introduction: JSX is JavaScript
- JSX is JavaScript: expressions and a single root
- Attributes and reserved words: `className`, `htmlFor`
- Conditional rendering: `&&`, ternary, early return
- Rendering lists with `.map()`
- The `key` and stable identity
- Describe the UI, don't manipulate the DOM
- Mini-project: render Mercado's catalog
- Module introduction: the interface that responds
- Responding to events: `onClick` and handlers
- Pass the function, don't call it
- The event object: `e.target.value` and `preventDefault`
- Controlled inputs: the `SearchBar`
- Passing data up with callbacks
- Keep the handlers clean
- Mini-project: wire up the storefront's events
- Module introduction: derive, don't store
- State or derived: the question that decides it
- Derive in the component's body
- Why stored derived state desyncs
- Filtering and sorting the `ProductList`
- The `key` when the list changes
- The decision: state, derived, and when to memoize
- Mini-project: derive Mercado's `ProductList`
- Module introduction: synchronizing with the outside world
- What a side effect is: synchronize, not transform
- The dependency array
- The cleanup: undoing what you set up
- Fetching data with an effect
- Fetch traps: race conditions, cleanup, and StrictMode
- You might not need an effect
- Mini-project: load Mercado's products
- Module introduction: the cart two siblings share
- Lifting the state to the common ancestor
- Local vs lifted state: when it goes up and when it stays
- The `cartReducer`: the cart logic as a pure function
- `useReducer` in React: `dispatch` and when to prefer it
- Composition over *prop drilling*
- Container and presentational: separating the state from the view
- Mini-project: the storefront's shared cart
- Module introduction: the seven modules, one method
- The scaffolding: set up the `App` and its tree
- Load the products with an effect
- The controlled search and the derived list
- The cart lifted in the `App`
- Wiring the callbacks: `query` and `cart`
- The polish: stable `key` and empty states
- Project: Mercado's storefront, complete
Common questions
What people usually ask
No limit. It's a free guide: come in whenever you like, as often as you like.
No. Modules run from easier to harder, but you can jump to the one you need. Progress is saved per lesson.
Whatever is needed is listed under “What you need to bring”, above. If nothing is listed there, you can start from zero.
In the Club's WhatsApp group, and every two weeks there's a live with an instructor where questions get worked through.
Yes. It's issued automatically once you finish every lesson, with a verifiable code you can share on LinkedIn.
Start whenever you like
What students say
These reviews are from enrolled students who completed at least 50% of the course. We moderate reviews only on content grounds (spam, offensive language, personal data), never for being critical or negative.
No approved reviews yet.
Be the first to share your experience!