Learn React for free

Unlock CourseGet started!

Join 76471 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenges
Huge discord community
Exclusive chat access
Unlock Course
Subscribe to access!Black Friday discount
Get access to this course and ALL other Scrimba courses at great value. Our 30-day money back guarantee makes this risk free for you.
Career Path includes
75+ hours of content
100s of coding challenges
Exclusive Study Group access
HTML, CSS, JS & React
Getting Hired section
30-day money-back guarantee
Subscribe now!62% covid discountSubscribe to access with 62% covid discount.
The course creator Bob Ziroll

with Bob Ziroll

76471 students enrolled

Course level: Intermediate

Consider this course React 101 - this is the perfect starting point for any React beginner. You'll learn key React features while building two apps and practice what you learn through interactive coding challenges and exercises along the way.

What's inside

This course contains 58 interactive screencasts

two girls
▼
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

You'll learn

Learn JSX
Props and state
Conditional rendering
Functional components
Class components
Styling components
Lifecycle methods
Fetching data from APIs
Handling events
Forms in React
Controlled components
Writing modern React
Local dev setup
React Hooks

You'll build

screenshot

Todo MVC

In this project you'll create an awesome todo app. It's a classic app which introduces you to the most important concepts of React.

screenshot

Meme Generator App

Memes are awesome so let's build a meme generator! It let's you speficy and image and a text and generated a meme.

man

Prerequisites

Before taking this course, you should have a basic understanding of HTML, CSS, and JavaScript. Here’s our suggested resources to get you up to speed.

The course creator

Meet your teacher

Bob Ziroll

Director of Education at V School. Passionate about learning, creating cool stuff, and helping others achieve their career goals.

Follow me on twitter

Why this course rocks

In this 57-part interactive tutorial, you'll learn how to build dynamic, interactive web applications with React.js in 2019. React is a JavaScript library for creating user interfaces. It has been created by the developers at Facebook and it excels in creating fast web applications using web components built with a simple-to-understand API.

The course is also filled with coding challenges that you'll complete by writing React code directly inside the Scrimba screencasts. Before you know it, you'll have written two first React JS applications! And you're in good company: over 50.000 students have enrolled in this course so far.

Many of them have pointed out on Twitter that this course is the best React tutorial they've went through.

V School Learning Philosophy

As the head of education at a tech school called V School in downtown Salt Lake City, Utah, I've formulated some philosophies about learning:

  • Learning should never be lonely - Take the course with friends if possible, and make use of the Q&A option to ask questions!
  • Learn by doing - Take advantage of Scrimba by frequently pausing the lesson and playing with the code. Then try to build things from your own computer using the stuff you just learned. And don't skip the practices!
  • Spaced learning and repetition is key - Give yourself time (days/weeks) to finish this course, and include lots of breaks. Don't try cramming it all in.

Contact Me

All constructive feedback is welcome! Feel free to tweet at me (@bobziroll) to let me know your thoughts.

Advanced React bootcamp

I've also created a follow-up course that tackles more advanced React topics. Click here to check it out!

This course is also a part of our hugely popular Front-End Devloper Career Path.

F to the A oracle to the Q

Why is React popular?

React initially skyrocketed 🚀 to fame because it made fetching and showing data in your JavaScript apps much easier than before. Because React is "just" a library instead of an elaborate framework, it was - and still is - relatively easy to learn. In 2020, we love React for its mobile support through React Native, excellent developer tools, and helpful community.

Who uses React?

Facebook built React for their own products, which include Facebook, Instagram, and WhatsApp . React is also used by Netflix, The New York Times, AirBnb, Discord, DropBox, and many other big companies you've heard of.

What is React used for?

React is used for frontend web apps to detect user input, fetch data, and update the user interface with data. React does all this with maximum performance.

What can React do?

React mainly gives you a structured way to create reusable frontend UI components, handle user input, update UI components efficiently, and manage your data.

Should I learn React in 2020?

Yes! React is the most popular frontend library in 2020 for numerous reasons. We are willing to bet that someone from the React team is preparing an update for React or, at least, a React tool as you're reading this. React is very relevant in 2020 and not likely to go out of style anytime soon.

Should I learn React or Angular?

Ah, the age old question! Anything you can build with React, you can build with Angular, and vice versa. Which you pick to learn is mostly preference. While React is best described as a library, Angular is an elaborate framework. With React, you'll pick and choose additional libraries that suit your project whereas, with Angular, you're expected to include the libraries you're given (they're pretty good).

What isn't good about React?

React is not without its downsides. When compared with a framework like Angular, you will find there is no predefined way to structure your app. To ensure you get the most from React, you'll need to spend a little more time researching and implementing popular and effective ways to structure your app.

Can I learn React without knowing JavaScript?

React doesn't rely on any advanced, mind-boggling JavaScript features but you absolutely should know the basics of JavaScript before attempting learning React; otherwise, you're in for a hard time.

How long does it take to learn React?

React is a small library built on clever design patterns and ideas. With a React course or tutorial, you could build your first app today but it will likely take you a few more days of practice to fully understand the core React concepts and unlock their full power. This, of course, depends on your experience and how much time you can commit.

Is React a framework or a library?

React is a library - a library of helpful functions and modules to pull into your app as and when you need them. This means you're in complete control of your app. A framework, by definition, is the essential support for your app, which you build on and operate within.

Can I use React for backend?

No, not really. For that, you'll need a server-side tool like Node and a server-side Node framework like Express. React does occasionally appear in backend frameworks like Next.js to do something advanced called server-side rendering, which is a smart way to improve page load time and SEO.

Can I use React with WordPress, Django, PHP, and other backend tools?

Yes, absolutely. In the early days, React probably worked best with Node.js but in 2020, it's free game. React is a fantastic candidate for any backend framework.

How much do React developers get paid?

Salaries can vary greatly from $40K to $100k and beyond. It depends on your aptitude, attitude, and location!

Join the JS advent calendar 🌲Go Pro!
Built with Imba