Natu Academy

Welcome

Introduction

Setup Your Toolkit

Declaring Things

Arrow Functions

Template Literals

Destructuring

Spread and Rest Operators

Optional Chaining and Fallbacks

Map

Filter and Find

Reduce

Modules

Promises and Async/Await

Document Object Model - DOM

Pushing to GitHub

Modern JavaScript Quiz

Chapter Recap

Project - Tip-splitter

Project-Tip-Splitter-Solution

Introduction

Your First React App

React Project Tour

What Is JSX?

JSX Rules - JSX vs HTML

Curly braces — JavaScript inside markup

Components — Functions That Return UI

Props — Passing Data Into Components

Destructuring props

The children Prop — Components That Wrap Other Components

Rendering lists with map

React Keys Explained

Conditional rendering

React Fundamentals - Quiz

React Fundamentals - Assignment

Introduction

Why components need state

useState

The state cycle

Updater functions

Events

The event object

Updating objects and arrays

One object or many state variables

Lifting state up

Derived state — compute, don't store

Controlled inputs

State and Events - Quiz

State and Events - Assignment

Introduction to Hooks

What is a side effect?

useEffect

The dependency array

Cleanup - undo what the effect did

StrictMode

When NOT to use an effect

Fetching data — three states, always

The fetch effect — the full pattern

Race conditions — ignore stale responses

useRef — a box that survives renders

useId — ids that survive reuse

useLayoutEffect — before the paint

useMemo — cache expensive work

useCallback — stable function identity

useTransition — keep typing instant

useDeferredValue — let a value lag

Custom hooks — extract and reuse

Writing useFetch

Writing useLocalStorage

API keys & environment variables

Your hooks toolbox — the full map

Effects, Data & Custom Hooks - Quiz

Effects, Data & Custom Hooks - Assignment

Introduction

One state object, one generic handler

The controlled loop

Every input type's controlled quirk

Validation strategy — when to check

The errors object

Accessible form errors

React 19 Actions — a new way to submit

useActionState — pending, error, result

useFormStatus — smart submit buttons

useOptimistic — instant feedback

Classic onSubmit vs Actions

Form libraries — a look ahead

The multi-step wizard pattern

Forms in React 19 - Quiz

Forms in React 19 - Assignment