The React Mega-Tutorial

Learn front end development with React by building a complete project step-by-step

4.30 (10 reviews)
Udemy
platform
English
language
Web Development
category
instructor
44
students
10.5 hours
content
May 2022
last update
$59.99
regular price

What you will learn

Write complete front end applications using JavaScript and React

Rendering of text, images and layout elements such as sidebars and headers

User registration, login and logout

Password change and recovery

Pagination

Client-side routing and navigation

Automated testing

Description

The React Mega Tutorial is a comprehensive step-by-step tutorial for beginner and intermediate JavaScript developers that teaches front end web development with React, a popular JavaScript library for building user interfaces in the browser.

With the help of this course, you will build a nicely featured social blogging application. The course begins from the absolute beginning, by showing you how to create a brand new React project. Then, each successive chapter adds and expands the project with new features. All the code featured in this course is open source and available on GitHub. Once you learn with this project, you are welcome to use the code for your own projects!

Some of the topics covered in this course include the following:

  • Overview of modern JavaScript features commonly used in React applications

  • Rendering of text, images and layout elements such as sidebars and headers

  • User registration, login and logout

  • Password change and recovery

  • Pagination

  • Client-side routing and navigation

  • Automated testing

  • Deployment strategies

  • and more!

Many of the features covered in this course require the support of a back end service. While this course does not cover back end development, a complete open source back end project specifically designed for this course is provided, along with instructions to install it and run it.

Content

The React Mega-Tutorial

Preface
Prerequisites
How to Work with the Example Code

Modern JavaScript

Introduction
ES5 vs. ES6
Summary of Recent JavaScript Features

Hello, React!

Introduction
Installing Node.js
Creating a Starter React Project
Installing Third-Party Dependencies
Application Structure
A Basic React Application
Dynamic Rendering

Working with Components

Introduction
User Interface Components
The Container Component
Adding a Header Component
Adding a Sidebar
Building Reusable Components
Components with Props

Routing and Page Navigation

Introduction
Creating Page Components
Implementing Links
Pages with Dynamic Parameters

Connecting to a Back End

Introduction
Running the Microblog API Back End
Using State Variables
Side Effect Functions
Rendering Blog Posts
Displaying Relative Times

Building an API Client

Introduction
What is an API Client?
A Simple Client Class for Microblog API
Sharing the API Client through a Context
The User Profile Page
Making Components Reusable Through Props
Pagination

Forms and Validation

Introduction
Introductions to Forms with React-Bootstrap
A Reusable Form Input Field
The Login Form
Controlled and Uncontrolled Components
Accessing Components through DOM References
Client-Side Field Validation
The User Registration Form
Form Submission and Server-Side Field Validation
Flashing Messages to the User

Authentication

Introduction
Enabling Back End Authentication
Authentication in the API Client
A User Context and Hook
Implementing Private Routes
Public Routes
Routing Public and Private Pages
Hooking Up the Login Form
User Information in the Header
Handling Refresh Tokens

Application Features

Introduction
Submitting Blog Posts
User Page Actions
Changing the Password
Password Resets

Memoization

Introduction
The React Rendering Algorithm
Unnecessary Renders
Memoizing Components
Render Loops
Memoizing Functions and Objects

Automated Testing

Introduction
The Purpose of Automated Testing
Testing React Applications with Jest
Renders, Queries and Assertions
Testing Individual Components
Using Fake Timers
Mocking API Calls

Production Builds

Introduction
Development vs. Production Builds
Generating React Production Builds
Deploying the Application
Production Deployment with Docker
Next Steps

Screenshots

The React Mega-Tutorial - Screenshot_01The React Mega-Tutorial - Screenshot_02The React Mega-Tutorial - Screenshot_03The React Mega-Tutorial - Screenshot_04

Reviews

Lorenzo
July 23, 2022
This course offers a basic introduction to React (not a mega tutorial as claimed). Miguel took some code shortcuts where he could've shown best practices instead. I am disappointed overall. - Expected more in depth exploration of react and its features. - Expected a more professional code. - The tests section is very shallow, and does not touch the most complex cases that it could. - Functions that go wrong return a "fail" string, which is a bad practice. It could instead of throw an exception.

Charts

Price

The React Mega-Tutorial - Price chart

Rating

The React Mega-Tutorial - Ratings chart

Enrollment distribution

The React Mega-Tutorial - Distribution chart

Related Topics

4669146
udemy ID
5/2/2022
course created date
6/30/2022
course indexed date
Bot
course submited by