5/5 (918 ratings)
Everything you need, structured and ready to go.
The Missing Introduction to React
Rendering view with HTML
Bootstrapping React in HTML
Render an element with React.createElement
Rendering nested elements with React.createElement
What is JSX?
Creating view with JSX
The relation between HTML and JSX
Accessibility and ARIA in JSX
Interpolating values in JSX
Using expressions in JSX
Introduction to Components
Components as functions returning view
Passing props to Components
The children prop
Setting up a dev environment with create-react-app
Isolating Components as exports and imports
Adding an event handler to an element
Adding state with the useState hook
One-way Data Flow in Components
Building re-usable Components
Introduction to the React reconciler
Introduction to the React Dev Tools
Conditional rendering with an if statement
Conditional rendering with the ternary operator
Conditional rendering with the boolean AND operator
Interpolating Arrays in JSX
Using Array.map to render an Array
Understanding the key prop
Filtering collections client side with Array.filter
Mapping an Object to view
Handling basic side effects
Understanding shallow dependency checks
Using the empty dependency Array in useEffects
Cleaning up after side effects
Creating controlled Components
Binding multiple form controls to Component State
Submitting form data
Updating form State from code
Using a textarea
Using a select
Using a checkbox
Grouping checkboxes together
Using radio buttons
Loading data into a form
From design to rough Component outline
Building a static React view from the design
From static view to stateful app
Making sure the app is accessible
Identifying re-usable code
Understanding HTTP requests
Create a basic HTTP server in Node Express
Fetching data from the server
Sending data to the server
Avoiding State changes on unmounted Components
Setting custom HTTP headers
Adding React Router to your application
Navigating with the router’s Link Component
Understanding route parameters
Updating the browser title
Making routing accessible
Introduction to the application
Adding a header and footer
Displaying the menu
Displaying the ice cream images
Adding a loading message
Routing to an edit component
Creating the main navigation
Fetching the menu item in the edit component
Editing the data in a form
Adding a skip navigation link
Building a validation system
Displaying validation messages
Deleting a menu item
Fetching the stock ice cream list
Displaying the stock list
Extracting the edit form
Creating the add page
Everything you need to start mastering React today
Built by Google Developer Experts, there's no better place to learn.
Design patterns, battle-tested techniques, architecture and performance.
Learn at home at your own pace, download for offline viewing.
Nail that interview or promotion with skills that will set you apart.
Access full source code, and experiment live in the browser.
Exclusive access to our members-only community (7,000+ members).
If you're disappointed for whatever reason, you'll get a full refund (but I'm sure you won't need it).
Not-so-good exchange rate? (i.e. India/Brazil). Student?
Email us for a coupon for your country or student ID.
A newer version of this site just became available. Please refresh this page to activate it.