Modern React From The Beginning

A free React online course to get started with modern React web development from scratch. Start learning React the smart way!

React is one of the most popular JavaScript front-end frameworks for building web applications right now. It is developed by Facebook and a community of individual developers and companies. React is constantly evolving and new features are added constantly.

Starting with React from scratch might be a challenge at first. There are many features and concepts which needs to be covered when starting to learn React. This might be overwhelming at first and it’s hard for new developers to get started in the right way.

This free React course is for you if you want to get started with modern React from scratch. By doing so we’ll cover latest concepts like React Hooks, functional components, and many more. No prior knowledge of React is required. However you should already have a basic understanding of web development with HTML, CSS and JavaScript to get going.

Let’s get started and have much fun learning React!

Episode 1: Creating Your First React App

Prepare the development environment, create your first React application from scratch and get familiar with the default React project structure:

Episode 2: Starting With React Components & JSX

In the first episode of this tutorial series we’ve started to prepare the React development environment and managed to setup the first React project. Now that you have a first understanding of the initial React project setup we’re able to move on and dive deeper into React. In this second episode you’ll learn more about React components and JSX.

Episode 3: Working With Lists

In the last episode we’ve learnt more about React components and JSX code. In this next part of the Modern React From The Beginning tutorial series I’d like to introduce you to how to work with lists and arrays in React.

Episode 4: Multiple Components

In the last part of this Modern React From The Beginning series we’ve worked with lists in our React application. A list of online courses has been created and that list has then be used inside the component’s JSX code to output course properties in the browser.

In this episode we’ll continue using this example. Up until now everything has been added to App component. Now we’ll refactor the React application a little bit and make use of multiple components to better structure the code.

Episode 5: Introducing Arrow Functions And Object Destructuring

In the last episode of the Modern React From The Beginning course we’ve split up the code of our React sample application in two components: App component and CoursesList component. This has helped us to bring more structure into our project. To build a modern React application in this part we’re going to introduce more advanced concepts of JavaScript in our React application: we’ll make use of arrow functions and object destructuring.

Episode 6: Event Handling

Handling of user events is an essential part in nearly every React web application. In this episode of the Modern React From The Beginning series you’ll learn how to handle standard user events in your React application. Therefore we’re going to extend our sample application with a new input field which will be user to enter a search term. For this field you’ll learn how to handle the Change and the KeyPressed event by adding corresponding event handler functions in the component.

Episode 7: State Management

You’ve already learned how to use props (component properties) to pass data into components. We’ve been using props to pass the array of courses into our CoursesList component. CoursesList component then makes use of the prop data to render it’s HTML output.

Another concept of managing data within your React application is State. The main difference to props is that state is managing data which is needed to render the result only within a component. For both concepts, props and state, the data is stored in plain JavaScript objects.

In this tutorial you’ll get started with state management in React. We’ll use the sample application and extend App component with state to manage the data which is provided by the user by using the search input field we’ve been added in the last episode.

Episode 8: Extracting Components

In the previous episode we’ve introduced state management into our React application. Thereby we’ve used state to management the current search text within App component. In this episode we’ll extract a separate Search component. Thus, we’ll keep the state still in App component. This enabled us to still use the state value to filter the list of courses and pass the filtered list to CoursesList component.

Episode 9: Using The Effect Hook

So far we’ve made use of the useState Hook which enables us to create state within our functional components. We’ve used the concept of state to manage the user input in the search field and generate a filtered list of courses based on the state value.

In this episode we’re going to cover another React Hook: the useEffect hook. By using this hook you’ll be able to handle side-effects in your application very easily.

Episode 10: Handling Of Asynchronous Data

In the last episodes you’ve already learnt about handling data in your React web application. In a real-world scenario you’ll also need to learn how to deal with data which is coming from outside of your application (e.g. from a web service, data base etc.). This requires us to also learn handling asynchronous data. This episode will introduce you to handling asynchronous data in your React application. At the first attempt we’ll just simulate asynchronous data within our application.

Episode 11: Reducer Hook For Advanced State Management

We’ve been creating a state in our components by using the useState hook. However React provides you with another way of managing state in your functional component: the useReducer hook. In general useReducer is preferable to useState when you have a complex state logic. This maybe the case when the state logic involved multiple sub-values or when the next state value depends on the previous state value.

In this episode we’ll change our existing implementation and make use of the useReducer hook to create and manage the courses state within App component.

Episode 12: Adding A Delete Action

In the last episode we’ve introduced the useReducer hook to manager out courses state in App component. So far, we’ve only implemented one action type in our reducer function: SET_COURSES. In this episode we’re going to enhance the reducer function by introducing another action typer for deleting a single course. Furthermore we’re implementing the necessary changes to add a Delete button and a corresponding click event handler function which is used to dispatch the new action type.

Excursus: Strapi As Back-End

Up to this point we’ve already developed our React application and thereby covered concepts and techniques of a modern React application.

We’ve also learned how to manage data within out React application by using state and techniques for asynchronous data handling. However, up until now the data which is used in out application is coming from inside of our component. In most real-world scenarios the data which is used and processed in the React front-end application is not defined and created in the React application itself. Instead a connection to a back-end is used for data access.

There are many possibilities of back-end technologies which can be used together with your React front-end application. In most cases you’ll end up using a back-end technology which is accessible via web services (e.g. REST web services) or GraphQL.

So before we’re able to extend our React application to retrieve data from a back-end we need to implement a back-end server and make web services available.

Of course you can implement such a back-end from scratch. However there is a much easier approach: using a headless CMS like Strapi.

Episode 13: Fetching Data

In this episode we’ll connect the React application we’ve implemented in the previous episodes of this series to a back-end. As a back-end a local Strapi project is used which is providing courses data via a REST-based web service.

The course is work in progress. New episodes will be added soon. Stay tuned!

ADVERTISEMENT: MERN Stack Front To Back: Full Stack React, Redux & Node.js

Check out the great course MERN Stack Front To Back: Full Stack React, Redux & Node.js with thousands of students already enrolled:

MERN Stack Front To Back: Full Stack React, Redux & Node.js*

Build and deploy a social network with Node.js, Express, React, Redux & MongoDB. Learn how to put it all together.

  • Use Stateless JWT authentication practices
  • Use Redux for state management
  • Create an extensive backend API with Express
  • Integrate React with an Express backend in an elegant way

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!

Using and writing about best practices and latest technologies in web design & development is my passion.