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.

2. What we'll be building

Speed, maintainability, hireability, and more.

3. Introducing The Frontend Developer Career Path

A quick look at the most comprehensive course on Scrimba.

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.

5. ReactDOM & JSX

Learn to spin up the most basic React app possible using ReactDOM and JSX.

6. ReactDOM & JSX Practice

Your turn! Create the boilerplate React code needed to render a few items in a list.

7. React Functional Components

Learn how to create your first React component using functional components.

8. React Functional Components Practice

Build a functional component that returns some UI with details about yourself.

9. OUT NOW: The React Bootcamp 🔥

A quick look at the advanced React Bootcamp on Scrimba.

10. Move Components into Separate Files

Learn to use import/exports in ES6 to separate our components into their own files.

11. React Parent/Child Components

Learn about the hirearchy of React components, with parent, children, and sibling components.

12. React Parent/Child Component Practice

Your turn! This is a chance to practice the parent/child component hierarchy.

13. React Todo App - Phase 1

We're starting a new todo app from scratch!

14. Styling React with CSS Classes

Learn how to add CSS style to your React applications using the className prop.

15. Some Caveats

Let's have a look at how I personally prefer to write my React code.

16. JSX to JavaScript and Back

Learn how to escape out of JSX and into JavaScript.

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.

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.

19. React Props Part 1: Understanding the Concept

A quick introduction to the concept of props in React.

20. React Props Part 2: Reusable Components

How can we break the YouTube homepage down into reusable components?

21. React Props

Learn the primary way to pass data from a parent component down to a child component.

22. React Props and Styling Practice

Create 5 Joke components, pass data down to each one, and add some styling to them.

23. Mapping Components in React

With the JavaScript array method .map(), we can easily create a new array of components to display.

24. Mapping Components Practice

Your turn! Try to display a list of products onto the page using the .map() method.

25. React Todo App: Phase 3

Let's use what we learned about mapping and props to improve our todo app.

26. Class-based Components

Learn about class-based components and when/why you'd want to use them.

27. Class-based Components Practice

Take some time to practice converting functional components into class components.

28. React State

Learn about state, which lets component be in charge of maintaining their own data.

29. React State Practice

Practice your React state skills by debugging a small app.

30. React State Practice 2

Given the importance of state, here's another chance to practice it.

31. React Todo App: Phase 4

Let's enhance our todo list app with React state.

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.

33. React Todo App: Phase 5

Let's make another small addition to our todo app.

34. React setState: Changing the State

Learn how to change a component's state using the this.setState method.

35. React Todo App: Phase 6

Let's implementing the logic we need to change the completed state of the todo item we click.

36. React Todo App: Phase 6.1 😑🙄

A quick lesson about how to not modify the state object directly.

37. React Lifecycle Methods Part 1

Lifecycle methods lets you trigger actions when a component undergoes a specific part of its lifecycle.

38. React Lifecycle Methods Part 2

Let's take a look at a few more lifecycle methods.

39. Lifecycle Methods Part 3 - componentDidUpdate

40. React Conditional Render

Let's use conditional rendering to pop up a loading screen while something else is happening in the background.

41. React Conditional Render Part 2

Learn to use the conditional AND (&&) to simply render something or nothing at all.

42. React Conditional Render Practice

Your chance to practice conditional rendering as well as numerous other concepts.

43. React Todo App: Phase 7

We finish off our todo app by adding some conditional styling to the completed items.

44. API Update: Please watch before proceeding

A quick note on the API we'll be using in the coming casts.

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.

46. React Forms Part 1

Learn how you can build forms in an easy and reusable way in React.

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.

48. React Form Practice

Your turn! Build a travel form that gathers your personal and trip information.

49. React Container & Component Architecture

Learn to use a container/component approach to splitting apart the business logic from the display logic.

50. React Meme Generator Capstone Project

Let's build a Meme Generator app using React JS and everything we've learned about the library.

51. Writing Modern React Apps

A quick look at moderns React concepts, like Hooks, Context, HOCs, render props and more.

52. Hooks Intro

Learn about Hooks, which lets you hook into the state and lifecycle methods of functional components.

53. useState() Part 1 - Creating State

An intro to useState, which is our application's way of managing state.

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().

55. useEffect() Part 1

The useEffect() hook allows us to produce side effects in our component.

56. useEffect() Part 2

Learn how to clean up any side-effects you might have introduced with the useEffect() hook.

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!

58. Conclusion - React Tutorial

Congrats! You've made it to the end. Let's recap what you've learned.