React Basics 
84 lessons
•13 hours
•
5/5 (918 ratings)
Get an extra 35% OFF everything with coupon code BLACK_FRIDAY
84 lessons
•13 hours
• 5/5 (918 ratings)
React Basics Take a dive into the React world, complete with the brand new Hooks API. Learn how to “think” in components, dataflow and master JSX to build React applications the modern way.
Closed Captions in English
Adding state with the useState hook • 07:31
By far the best React introductory course out there, just brilliant. I've attempted many others before, but none were up-to-date and comprehensive like this.
Onome Adamu
Software EngineerLoved React Basics. The content is amazing, I learnt so much on this course, can't wait to go over the next React courses!
Victor Hazbun
CEOFantastic courses explained incredibly well. Very easy to follow and understand concepts. 10/10.
Nicolas Telfer
Co-founder / EngineerCrystal clearly explained concepts, meticulously designed examples and projects! Fantastically valuable courses overall!
Yiling Lu
Senior DeveloperI attempted other courses before these, and Ultimate Courses is way ahead and incomparable. Clearest explanations, easy to understand, beyond basics, fantastic value for money.
Fabrizio Masini
JavaScript DeveloperAbsolutely fantastic courses. Self-paced, comprehensive, real examples from beginning to end, clear and concisely brilliant.
Jacob Cheriathundam
Development ArchitectEverything you need, structured and ready to go.
1 lesson
The Missing Introduction to React
06:52
10 lessons
Rendering view with HTML
01:57
Bootstrapping React in HTML
02:07
Render an element with React.createElement
03:30
Rendering nested elements with React.createElement
04:34
What is JSX?
03:34
Creating view with JSX
04:49
The relation between HTML and JSX
04:15
Accessibility and ARIA in JSX
02:38
Interpolating values in JSX
03:58
Using expressions in JSX
06:23
11 lessons
Introduction to Components
05:52
Pure functions
03:12
Components as functions returning view
04:11
Passing props to Components
05:15
The children prop
06:43
Setting up a dev environment with create-react-app
11:07
Isolating Components as exports and imports
04:26
Adding an event handler to an element
07:12
Adding state with the useState hook
07:31
One-way Data Flow in Components
07:43
Building re-usable Components
09:43
2 lessons
Introduction to the React reconciler
06:12
Introduction to the React Dev Tools
08:32
14 lessons
Conditional rendering with an if statement
12:02
Conditional rendering with the ternary operator
01:27
Conditional rendering with the boolean AND operator
03:59
Interpolating Arrays in JSX
03:14
Exploring Array.map
04:04
Using Array.map to render an Array
02:56
Understanding the key prop
12:11
Filtering collections client side with Array.filter
08:20
Mapping an Object to view
04:07
Handling basic side effects
13:40
Understanding shallow dependency checks
05:29
Using the empty dependency Array in useEffects
07:31
Cleaning up after side effects
11:05
JavaScript closures and the useEffect hook
17:11
10 lessons
Creating controlled Components
10:29
Binding multiple form controls to Component State
08:54
Submitting form data
05:51
Updating form State from code
03:31
Using a textarea
03:56
Using a select
04:55
Using a checkbox
04:35
Grouping checkboxes together
06:52
Using radio buttons
08:17
Loading data into a form
09:48
5 lessons
From design to rough Component outline
04:09
Building a static React view from the design
21:27
From static view to stateful app
15:48
Making sure the app is accessible
06:55
Identifying re-usable code
15:48
7 lessons
Understanding HTTP requests
04:47
Create a basic HTTP server in Node Express
05:48
Fetching data from the server
15:00
Sending data to the server
09:44
Avoiding State changes on unmounted Components
04:51
Using async/await
03:36
Setting custom HTTP headers
03:21
5 lessons
Adding React Router to your application
11:29
Navigating with the router’s Link Component
06:36
Understanding route parameters
13:53
Updating the browser title
09:49
Making routing accessible
09:29
19 lessons
Introduction to the application
07:49
Adding a header and footer
08:06
Displaying the menu
20:20
Displaying the ice cream images
10:29
Adding a loading message
25:37
Routing to an edit component
19:50
Creating the main navigation
03:49
Fetching the menu item in the edit component
18:45
Editing the data in a form
37:53
Routing accessibility
31:29
Adding a skip navigation link
07:59
Building a validation system
14:19
Displaying validation messages
10:25
Accessible validation
21:09
Deleting a menu item
07:04
Fetching the stock ice cream list
09:53
Displaying the stock list
18:37
Extracting the edit form
23:36
Creating the add page
18:59
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.
