Learn React for free

This playlist is part of Learn React for free

Learn React for free
58 lessons - 5 hours
1. Course Introduction & Learning Philosophy
This course introduction video will give some of my background and a preview of what you'll be learning throughout this course.
6:40
2. What we'll be building
Speed, maintainability, hireability, and more.
0:58
3. Introducing The Frontend Developer Career Path
A quick look at the most comprehensive course on Scrimba.
1:10
4. Why use React?
This course introduction video will give some of my background and a preview of what you'll be learning throughout this course.
2:56
5. ReactDOM & JSX
Learn to spin up the most basic React app possible using ReactDOM and JSX.
6:49
6. ReactDOM & JSX Practice
Your turn! Create the boilerplate React code needed to render a few items in a list.
4:11
7. React Functional Components
Learn how to create your first React component using functional components.
3:52
8. React Functional Components Practice
Build a functional component that returns some UI with details about yourself.
5:05
9. OUT NOW: The React Bootcamp 🔥
A quick look at the advanced React Bootcamp on Scrimba.
1:53
10. Move Components into Separate Files
Learn to use import/exports in ES6 to separate our components into their own files.
5:20
11. React Parent/Child Components
Learn about the hirearchy of React components, with parent, children, and sibling components.
8:03
12. React Parent/Child Component Practice
Your turn! This is a chance to practice the parent/child component hierarchy.
4:53
13. React Todo App - Phase 1
We're starting a new todo app from scratch!
2:31
14. Styling React with CSS Classes
Learn how to add CSS style to your React applications using the className prop.
5:00
15. Some Caveats
Let's have a look at how I personally prefer to write my React code.
2:13
16. JSX to JavaScript and Back
Learn how to escape out of JSX and into JavaScript.
3:53
17. React Inline Styles with the Style Property
Learn how to use dynamic data and inline styles to make an ap that can change its own style.
7:05
18. React Todo App - Phase 2
Let's apply our parent/child components and styling skills to the test by working on our todo list.
3:17
19. React Props Part 1: Understanding the Concept
A quick introduction to the concept of props in React.
2:08
20. React Props Part 2: Reusable Components
How can we break the YouTube homepage down into reusable components?
2:28
21. React Props
Learn the primary way to pass data from a parent component down to a child component.
12:05
22. React Props and Styling Practice
Create 5 Joke components, pass data down to each one, and add some styling to them.
10:41
23. Mapping Components in React
With the JavaScript array method .map(), we can easily create a new array of components to display.
7:57
24. Mapping Components Practice
Your turn! Try to display a list of products onto the page using the .map() method.
6:25
25. React Todo App: Phase 3
Let's use what we learned about mapping and props to improve our todo app.
4:28
26. Class-based Components
Learn about class-based components and when/why you'd want to use them.
5:10
27. Class-based Components Practice
Take some time to practice converting functional components into class components.
3:34
28. React State
Learn about state, which lets component be in charge of maintaining their own data.
4:51
29. React State Practice
Practice your React state skills by debugging a small app.
3:32
30. React State Practice 2
Given the importance of state, here's another chance to practice it.
4:09
31. React Todo App: Phase 4
Let's enhance our todo list app with React state.
2:01
32. Handling Events in React
Handling events in React is fairly simple, and looks very similar to the way it's done in regular HTML.
3:42
33. React Todo App: Phase 5
Let's make another small addition to our todo app.
1:13
34. React setState: Changing the State
Learn how to change a component's state using the this.setState method.
12:15
35. React Todo App: Phase 6
Let's implementing the logic we need to change the completed state of the todo item we click.
7:40
36. React Todo App: Phase 6.1 😑🙄
A quick lesson about how to not modify the state object directly.
2:42
37. React Lifecycle Methods Part 1
Lifecycle methods lets you trigger actions when a component undergoes a specific part of its lifecycle.
9:25
38. React Lifecycle Methods Part 2
Let's take a look at a few more lifecycle methods.
3:18
39. Lifecycle Methods Part 3 - componentDidUpdate
8:34
40. React Conditional Render
Let's use conditional rendering to pop up a loading screen while something else is happening in the background.
11:14
41. React Conditional Render Part 2
Learn to use the conditional AND (&&) to simply render something or nothing at all.
2:50
42. React Conditional Render Practice
Your chance to practice conditional rendering as well as numerous other concepts.
8:32
43. React Todo App: Phase 7
We finish off our todo app by adding some conditional styling to the completed items.
2:30
44. API Update: Please watch before proceeding
A quick note on the API we'll be using in the coming casts.
1:26
45. Fetching data from an API with React
Learn how to get data from API's in React by using fetch in the componentDidMount lifecycle method.
10:55
46. React Forms Part 1
Learn how you can build forms in an easy and reusable way in React.
12:06
47. React Form Part 2
Learn how to use some of the other form elements in React, like text areas, checkboxes, radio buttons, and select boxes.
15:21
48. React Form Practice
Your turn! Build a travel form that gathers your personal and trip information.
20:13
49. React Container & Component Architecture
Learn to use a container/component approach to splitting apart the business logic from the display logic.
11:20
50. React Meme Generator Capstone Project
Let's build a Meme Generator app using React JS and everything we've learned about the library.
20:11
51. Writing Modern React Apps
A quick look at moderns React concepts, like Hooks, Context, HOCs, render props and more.
6:03
52. Hooks Intro
Learn about Hooks, which lets you hook into the state and lifecycle methods of functional components.
1:44
53. useState() Part 1 - Creating State
An intro to useState, which is our application's way of managing state.
7:18
54. useState() Part 2 - Changing State
Convert a class component to a functional one using hooks, and also learn to change the state using useState().
7:45
55. useEffect() Part 1
The useEffect() hook allows us to produce side effects in our component.
8:01
56. useEffect() Part 2
Learn how to clean up any side-effects you might have introduced with the useEffect() hook.
10:16
57. React Project Ideas for Practicing
The best way to learn React is to build lots of apps, so here are some project ideas for you!
0:43
58. Conclusion - React Tutorial
Congrats! You've made it to the end. Let's recap what you've learned.
2:50
Join the JS advent calendar 🌲Go Pro!
Built with Imba