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.
Join the JS advent calendar 🌲Go Pro!
Built with Imba