Want to become a React developer? Here’s a massive 48- Part Course created by a Top Technology school

Ever since we started creating courses on Scrimba, our users have asked us for a proper intro course on React. So today I finally have the pleasure of presenting: Learn React (← click the link to get to the course).

This is the most comprehensive intro course ever created on Scrimba. It contains 48 Chapters in total — a mix of chapters lectures and interactive assignments.

The man behind the course is the eminent teacher Bob Ziroll. Bob is the Director of Education at V School, a technology education school that teaches full stack Javascript and UX courses.

V School is one of the top coding schools according to
Course Report, so we’re super excited to team up with them.

So if you like this course, be sure to check out V Schools immersive full-stack program. Now let’s have a look at how the course is laid out!

Part 1. Intro & Philosophy

Bob has been teaching in bootcamps since 2014, and has developed his own learning philosophy. So in the first screencast, we’ll get familiar with this philosophy. In the image below you’ll see the gist of it.

Part 2. What we’ll be building

In the next video, Bob gives an overview of the course, where he gives us a quick glance at two projects we’re going to build: a simple To-do list app, which covers a lot of React core topics; and a capstone project, which will be a meme generator app.

Part 3. Why React?

First things first, Bob lets us know why we should even consider using something like React instead of just writing it in plain JavaScript and why so many developers already chose to use React.

Part 4. ReactDOM & JSX

In this Screencast we jump straight into code and write our Hello World using JSX — a React Specific JavaScript eXtension, so we can write HTML and JavaScript at the same time!

import React from "react"import ReactDOM from "react-dom"Copy the code

ReactDOM.render(<h1>Hello world! </h1>, document.getElementById("root"))Copy the code

Bob also quickly covers a few gotchas, like correct React imports and that JSX doesn’t like when you’re trying to render two adjacent elements.

// Hm, not sure which element I should render here... ReactDOM.render( <h1>Hello world! </h1> <p>I'm a paragraph</p>, document.getElementById("root"))Copy the code

// This is much better! ReactDOM.render( <div> <h1>Hello world! </h1> <p>I'm a paragraph</p> </div>, document.getElementById("root"))Copy the code

Part 5. ReactDOM & JSX Practice

This is our first practice of this course. In practice screencasts Bob sets us an Objective and gives us a few Hints.

Bob encourages us to spend some time thinking about and working our way through this and subsequent challenges, as the more effort we put in the more we can remember about React.

In the end, Bob shows and walks us through the solution, but this blog won’t give any spoilers 😃, so feel free to check it out in the actual screencast.

Part 6. Functional Components

In this cast, Bob gives us a quick overview of Functional Components.

import React from "react"import ReactDOM from "react-dom"Copy the code

function MyApp() {  return (    <ul>       <li>1</li>       <li>2</li>       <li>3</li>    </ul>)}Copy the code

ReactDOM.render(   <MyApp />,   document.getElementById("root"))Copy the code

We define MyApp() as a simple JS function which returns a very simple HTML list element, but that’s where React shines through as later we use that function as <MyApp /> HTML element!

Part 7. Functional Components Practice

Time for some more practice.

So just like in the previous practice cast, there will be no spoilers here, but feel free to jump straight into code and come up with your own solution. In the end Bob walks us through it just like before.

Part 8. Move Components into Separate Files

In this chapter, Bob gives us a few good and common React practices for organising code, for example naming files with components MyInfo.js the same as the component itself <MyInfo /> .

We then learn how to extract components into their own separate files and how to export them to later use in our app.

// MyInfo.jsCopy the code

import React from "react"function MyInfo() {  return (   // component code  )}Copy the code

export default MyInfoCopy the code

We can then just place our component into components folder and import <MyInfo /> to index.js

// index.jsCopy the code

import React from "react"import ReactDOM from "react-dom"Copy the code

import MyInfo from "./components/MyInfo"Copy the code

ReactDOM.render(   <MyInfo />,    document.getElementById("root"))Copy the code

Part 9. Parent/Child Components

In this screencast, Bob talks about Parent and Child components. Regular applications are far more complex than just one component rendered to the DOM. Instead, we usually have a complex hierarchy of components.

We start with writing our Functional Component <App /> which is going to be at the top of the component hierarchy

// index.jsCopy the code

import React from "react"import ReactDOM from "react-dom"Copy the code

import App from "./App"Copy the code

ReactDOM.render(<App />, document.getElementById("root"))Copy the code

And in the App.js itself:

// App.jsCopy the code

import React from "react"Copy the code

function App() { return ( <div> <nav> <h1>Hello a third time! </h1> <ul> <li>Thing 1</li> <li>Thing 2</li> <li>Thing 3</li> </ul> </nav> <main> <p>This is where most of my content will go... </p> </main> </div> )}Copy the code

export default AppCopy the code

As you can see, we can write our pages in <App /> but that defeats the purpose of React. We can take each piece of HTML and put in a separate component.

This is what our <App /> might look like:

Using this concept our <App /> component would look like so:

import React from "react"import MainContent from "./MainContent"import Footer from "./Footer"Copy the code

function App() {  return (    <div>      <Header />      <MainContent />      <Footer />    </div>  )}Copy the code

export default AppCopy the code

This is much better and it’s a very neat way to organise code.

Part 10. Parent/Child Components Practice

It’s practice time. Here’s the task we get from Bob so let’s get started.

As usual, no spoilers in this blog, so feel free to dive into the solution in Bob’s screencast.

If you’re not very sure where to start, Bob recommends to look over the previous chapters first and attempt to come up with a solution, even if it’s not perfect at this stage. This would be the best way to learn.

Part 11. Todo App — Phase 1

Alright! Congratulations, we’ve mastered the very basics of React and this foundation is enough for us to start building our first real-world app.

First, we need to create a structure for our app, And that’s a perfect opportunity to practice what we have learned in the previous screencasts. Here’s the task and let’s get started.

By now this should be quite straightforward and Bob walks through the solution with us.