1. Code
  2. React

Learn React 18: The Complete React Developer Course

Scroll to top
Contents
Scroll to top
Contents
Read Time: 9 min

React is the most popular framework for building user interfaces. In this course, you will learn the fundamental concepts you need to start building applications with React.

This course is 3 hours 40 minutes long, and it’s split into 27 lessons in total. You’ll find it’s a great resource that you will come back to often, so make sure you bookmark the parts that interest you. 

Who Is This FREE Course For?

  • Designers who want to branch out
  • Programmers who want to expand their expertise
  • Anyone who wants to learn something new and exciting

Follow Along, Learn by Doing

I encourage you to follow along and to do exactly what you see on screen. This way, you learn by doing.

To help, the React course GitHub repository contains the source code for each lesson and the completed sample project that was built throughout the course. 

1. What You Will Learn in This Free React Course

You'll start with the basics of React—coding your first components:

  • using React with vanilla JavaScript
  • the basics of the React toolchain 
  • the rules of JSX and how to use it to build components 

Then, you'll learn the most up-to-date methods of coding components with hooks, state, props, and events.

  • using props to pass parameters to components
  • how to validate props and provide default values for them
  • using state in components
  • how to handle DOM events and create your own custom events for components
  • using hooks within your components 

In the final part of the course, you'll learn some key skills for building real-world applications with React:

  • using React with forms
  • styling your components with CSS modules 
  • connecting to an external REST API
  • building a single-page application with React Router

By the end of this course, you will have the confidence and know-how to build your own React-powered apps!

2. React With No Toolchain

Building Your First React App

Watch video lesson [0:02:19] ↗

It's possible to build applications with React without using any toolchains—just the React library and pure JavaScript.

To follow along, all you need is a source code editor like Visual Studio Code and the React CDN links.

Introducing Components

Watch video lesson [0:12:20] ↗

React applications are built with components. You'll learn what components are and how to create them with the React library.

To keep with tradition, let's create a Hello World component:

3. React With a Toolchain

Setting Up Your Environment

Watch video lesson [0:18:46] ↗

To use React with a toolchain, you'll need to install Node.js on your computer. This will give us access to NPM, which will make it easy to install all the React dependencies.

Once you've installed Node, you can install and run the create-react-app tool with the following command:

This will give you the source code scaffolding for a React application named react-fundamentals, ready to go with an up-to-date toolchain. Once you have created your app, just run npm start to compile and run your app in the browser with live reloading.

Introducing JSX

Watch video lesson [0:23:09] ↗

You can build a React app with pure JavaScript, but with JSX it's much easier. JSX is a special syntax that allows you to combine JavaScript and XML to quickly code components.

There are some rules you need to follow if you use JSX, and you'll learn what they are in this lesson.

Starting From Scratch

Watch video lesson [0:32:40] ↗

I always find it beneficial to start completely from scratch. So in this lesson, we'll do just that.

Using Fragments

Watch video lesson [0:40:28] ↗

Since components have to return just a single React element, sometimes it's useful to use a React Fragment. You'll learn the different ways to express a fragment in this lesson.

Separating JavaScript and JSX

Watch video lesson [0:51:28] ↗

Using JavaScript with JSX lets you write cleaner components with more complex data processing and logic.

Even though we're in this new paradigm, we still want to separate our JavaScript code from our JSX. JSX should be expressive, and you'll learn how you can do that in this lesson.

React does not aim to separate markup and logic by placing them in separate files. Instead, it relies on components to split your UI into multiple entities which can function independently. It is our job to keep our logic separate from the markup within the component. The best way to do so is to set everything up in JavaScript beforehand and use JSX to then create our UI based on the final data.

4. Working With Data

Passing Data With Props

Watch video lesson [0:59:30] ↗

In React, we primarily use props (short for properties) to pass data to our components. 

The easiest way to understand props is to think of them like the attributes that you can pass to HTML elements in web development. However, props are much more advanced.

Validating Props

Watch video lesson [1:06:57] ↗

Props are not validated by default—you have to opt in to validate your props. It's more of a development and debugging tool than anything else.

Providing Default Prop Values

Watch video lesson [1:15:37] ↗

Defining default values for your props can be beneficial. You'll learn how to do that in this lesson.

Getting Started With State

Watch video lesson [1:20:14] ↗

State is used to manage information or data within React components. Unlike props, the state data can be changed throughout the lifetime of the component.

State is how React knows to re-render components. I'll introduce you to state in this lesson.

Handling DOM Events

Watch video lesson [1:29:23] ↗

Events are vital to any graphical user interface. I'll show you how to handle native DOM events in this lesson.

Writing Components as Classes

Watch video lesson [1:35:08] ↗

Traditionally, components have been written as classes. We'll convert one of our function components to a class in this lesson.

Using Controlled Inputs

Watch video lesson [1:45:33] ↗

There are two ways to work with forms in React. In this lesson, I'll show you how to use "controlled inputs".

Controlled inputs are those form elements whose value is controlled by the React component state. They are the preferred way of handling form input with React.

Lifting State and Custom Events

Watch video lesson [1:57:21] ↗

A lot of the time, we want to lift the state from a child to a parent component. We'll go through that process, and I'll show you how to create your own custom events.

Using Uncontrolled Inputs

Watch video lesson [2:04:33] ↗

A less tedious way to work with forms is with "uncontrolled inputs". I'll show you how to use them in this lesson.

With uncontrolled inputs, we don't have to worry about setting or updating input values, so there is no need to create onChange event listeners or use a value attribute. 

5. Styling Components

Styling With Inline Styles

Watch video lesson [2:15:56] ↗

Using inline styles in React isn't a bad thing like it is in regular HTML. In this lesson, I'll show you how to use the style attribute for React classes.

Using CSS Modules

Watch video lesson [2:23:15] ↗

CSS module support is provided out of the box with create-react-app. You'll learn what CSS modules are and some of the reasons why you may want to use them. 

Using the style attribute as the primary means of styling elements is generally not recommended. In most cases, className should be used to reference classes defined in an external CSS stylesheet. — React docs

6. Working With External Data

Preparing the Weather Widget

Watch video lesson [2:31:34] ↗

We'll build a real weather widget by using a free weather API. But first, we need to lay the framework for it.

Handling Side Effects in Class Components

Watch video lesson [2:38:46] ↗

Processes that have side effects, like an HTTP request, should be handled properly. In this lesson, you'll learn about lifecycle events within a class component, and how to use them to fetch external data.

Using the Effects Hook in Function Components

Watch video lesson [2:47:35] ↗

Function components don't have life-cycle events; instead, we must use hooks to "hook into" that functionality.

Making Requests in Our Components

Watch video lesson [2:54:41] ↗

It's time to finally issue HTTP requests to the weather API! We'll use the Weatherstack API.

7. Building Single-Page Applications

Introducing React Routing

Watch video lesson [3:04:10] ↗

We use a package called react-router-dom to provide routing in our apps. You'll learn how to install it and set up routes in this lesson.

Using Layouts and Defining Nested Routes

Watch video lesson [3:14:02] ↗

Layout routes are vital to any web application; they allow us to define the look and feel of our applications within a single component.

Using Route Parameters

Watch video lesson [3:21:38] ↗

Route parameters are the essential way we pass information to route-handling components. You'll learn how to use them in this lesson.

Using Side Effects in Router Pages

Watch video lesson [3:29:40] ↗

It can be a little tricky to use side effects in a route. I'll show you how in this lesson. We'll fetch data from Newsapi.org.

8. Conclusion

React unquestionably changed the way we build web applications, and it's my hope that if you followed all the lessons in this course, you now have a fundamental understanding of how to effectively use React to build applications.

FREE
1.6 Hours

Practical React Fundamentals | FREE COURSE

In this course, you'll learn the fundamental concepts of React while building a practical application. You'll practice writing components, working with events, handling user input, and working with state.

    Advertisement
    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.