Five Minute React

 

Learn React, Redux, Webpack and More with Fun, Easy, Bite-sized Lessons

Let's Face It … Most React Tutorials Suck

Don’t you hate it when a React Instructor:

  • Jumps straight to the flashy stuff without covering critical basic concepts?
  • Teaches you how to build a trivial app that’s useless in the real world?
  • Only focuses on the front-end?
  • Leaves out the nitty gritty details required to build a production-quality app?

Five Minute React is different.

Have you ever wanted to build a complete single-page web app from scratch? In Five Minute React that's exactly what you'll do. Sound hard? It's not! In short, simple steps you'll learn through straightforward examples exactly how to build a fully-operational web application that includes user registration and authentication.

On the React side, you'll start with basic sample components and become comfortable with props, container components, lifecycle methods, and 3rd-party modules. You'll also get a thorough grounding in managing application state with Redux actions and reducers.

On the back-end, you'll build an entire API to power your React application, using Express and MongoDB. Not familiar with those tools? Grab the full-stack package and we’ll cover absolutely everything, including all of the installation and setup of everything you’ll need before diving in.

Every single lesson comes with full video and full text. Nothing is skipped; you'll get every line of code you'll need, with thorough explanations of what that code is doing. We’ll give you the tools and knowledge you need to develop any web app your heart desires.

And if you don't think the course was worth your money, it comes with a 100% money-back guarantee.

Here's a sampling of what you'll work with:

JavaScript logo Node.js logo React logo Express logo MongoDB logo Webpack logo Jest logo

“In the space of Full-Stack MERRN (I added the second R for Redux)—a single course that stitches everything together—there is no course online or off that comes anywhere close to what you have been able to provide … as a new programmer who has taken online courses in all of these areas, Five Minute React was invaluable. Everything about it is great. Gregg Squire

“CloseBrace really helped me in shifting my career from being a BioInformatician to a Web Developer. With his clear and instructive tutorials I was able to launch my first React site in two months’ time. Without CloseBrace, I wouldn't have managed.” Sjors van Heuveln

“Your 5 Minute ReactJS course is, in my opinion, the best React course out there.” Nick Wood

“Great tutorial, thanks! Very clear and simple instructions. You definitely deserve more subscribers.” Timo Ernst

“Thank you for the tutorial series and all the useful stuff you are providing. It helped me get confident with React and understand many basics.” Samos

Learn React Now

Christopher Buecheler picture

About The Author

I’m Christopher Buecheler, a self-taught web developer with over 20 years of professional experience. I’ve worked as a developer for a variety of internet companies. I founded CloseBrace because I love the tech I work with and wanted to share what I’ve learned with other developers. I believe anyone can learn Node, Express, React, or anything else they’d like, and I want to help you do it!

What Are the Prerequisites?

You should be very comfortable with basic JavaScript concepts like variables, for loops, switch statements, and the like. Familiarity with XHR and asynchronous coding is a plus. You should have a general understanding of how APIs work and what HTTP requests do. This course uses ES2015 (aka ES6), but those features are explained in the lessons as they come up.

That’s about it. If you’ve taken a front-end bootcamp, you’re probably ready for this course!

What Do I Get?

84 bite-sized lessons, roughly nine hours of video, a complete git repo, and a thorough grounding in everything you need to build a real-world, production quality React application . Here are some things you’ll do during this course:

React-Only Tier

  • Become familiar with React components, including using props, container components, and component state.
  • Learn the difference between class-based and pure function components and when to use each.
  • Become familiar with Redux, the industry standard for app state management, including detailed explanations of actions, action creators, reducers, and the Store.
  • Build an internal API for data handling and connect your React app to it.
  • Work with an external API service.
  • Build an entire front-end application that includes error handling, validation, and front-end routing.
  • Set up a server and deploy your app live on the internet.

Full-Stack Tier

  • Set up everything you’ll need. Text editor, database, web server, transpiler, bundler, etc.
  • Learn about linting with ESLint, testing with Jest, and version control with Git
  • Work with one of the most popular authentication packages for Express to allow users to register, log in, and log out.
  • Get an introduction to how Webpack works and use it to bundle your React app, Bootstrap, and custom CSS.

Full Course Listing

Five Minute React 01 - Installing Sublime Text

Five Minute React 02 - Configuring Sublime Text

Five Minute React 03 - Installing Node

Five Minute React 04 - Package Control

Five Minute React 05 - Using Node Modules

Five Minute React 06 - Installing MongoDB

Five Minute React 07 - Using MongoDB

Five Minute React 08 - Version Control Part 1

Five Minute React 09 - Version Control Part 2

Five Minute React 10 - Installing Express

Five Minute React 11 - Intro to Express Part 1

Five Minute React 12 - Intro to Express Part 2

Five Minute React 13 - Express Routing

Five Minute React 14 - Express Cleanup and API Setup

Five Minute React 15 - Git Branching

Five Minute React 16 - Data Modeling

Five Minute React 17 - Installing Passport

Five Minute React 18 - Setting Up Testing

Five Minute React 19 - Testing With Jest

Five Minute React 20 - Testing an API Endpoint

Five Minute React 21 - Working With ESLint

Five Minute React 22 - ESLint From The Command Line

Five Minute React 23 - Installing React Necessities

Five Minute React 24 - Setting Up Webpack

Five Minute React 25 - Our First React Components

Five Minute React 26 - Using Props In React

Five Minute React 27 - Webpack Hot-Reloading Part 1

Five Minute React 28 - Webpack Hot-Reloading Part 2

Five Minute React 29 - React Folders and Template

Five Minute React 30 - Building Out Components

Five Minute React 31 - React Routing

Five Minute React 32 - Fixing Webpack

Five Minute React 33 - DRYing Your Code

Five Minute React 34 - Adding Bootstrap

Five Minute React 35 - Classes and State

Five Minute React 36 - Building a Log In Page

Five Minute React 37 - API Endpoint: Registration

Five Minute React 38 - Log In and Log Out

Five Minute React 39 - A Basic Intro to Redux

Five Minute React 40 - Setting Up The Store

Five Minute React 41 - Redux Actions

Five Minute React 42 - Redux Tools

Five Minute React 43 - Optimizing for Production Part 1

Five Minute React 44 - Optimizing Part 2

Five Minute React 45 - Wiring Up Log-In Part 1

Five Minute React 46 - Wiring Up Log-In Part 2

Five Minute React 47 - Wiring Up Log-In Part 3

Five Minute React 48 - Displaying User Information

Five Minute React 49 - Intro to Component Lifecycle

Five Minute React 50 - Logging Out

Five Minute React 51 - Asynchronous Actions

Five Minute React 52 - Refactoring Log-In

Five Minute React 53 - Final Action Refactoring

Five Minute React 54 - Building A Registration Page

Five Minute React 55 - Sending to the Registration API

Five Minute React 56 - Registration Success Page

Five Minute React 57 - Error Handling

Five Minute React 58 - Front-End Validation

Five Minute React 59 - Back-End Validation

Five Minute React 60 - Reset Password Part 1

Five Minute React 61 - Reset Password Part 2

Five Minute React 62 - Setting Up SMTP

Five Minute React 63 - Securing Secrets

Five Minute React 64 - Save Password Part 1

Five Minute React 64.5 - Fix The Production Build

Five Minute React 65 - Save Password Part 2

Five Minute React 66 - Save Password Part 3

Five Minute React 67 - Setting Up An External API

Five Minute React 68 - Search Albums

Five Minute React 69 - Add Album Front-End

Five Minute React 70 - Add Album Back-End

Five Minute React 71 - Saving Music Data Locally

Five Minute React 72 - Search and Add Artists

Five Minute React 73 - View a User's List

Five Minute React 74 - Improving Music Lists

Five Minute React 75 - Wire Up Remove Buttons

Five Minute React 76 - Upgrade Node and React

Five Minute React 77 - Improving The Home Page

Five Minute React 78 - Final Webpack Optimizations

Five Minute React 79 - Securing Express

Five Minute React 80 - Set Up a Server

Five Minute React 81 - Create a Superuser

Five Minute React 82 - Merging to Master

Five Minute React 83 - Install Node and MongoDB

Five Minute React 84 - Secure MongoDB and Finalize

Five Minute React - Wrapup

Your Purchase Options

Option 1 - React-Only Package - $149

If you’re a developer who’s already comfortable getting your text editor, Yarn, Express, MongoDB, Jest, ESLint, Babel, Webpack, etc. set up on your own, and doesn’t need an introduction to Express, this package will get you started coding right away. You’ll get:

  • A text-based overview of the first 24 lessons
  • All necessary files from those lessons
  • The remaining lessons (25 - 84)
  • Access to ALL Source Code

Get the React-Only Package for $149

Option 2 - Full-Stack Package - $297

Not as experienced with Express, Node, or MongoDB? Not sure how to get everything up and running on your machine? Just want to make sure you have absolutely all of the instruction, whether you need it or not? This is the package for you. You’ll get:

  • ALL 84 lessons
  • Access to ALL Source Code
  • Download Videos to Your Local Machine
  • Lifetime access to my Slack support channel

Get the Full-Stack Package for $297

Coupon: Apply

Not sure yet? How about seven lessons for free? Sign up now and you'll get the following lessons delivered to your inbox, one per day:

  • Our First React Components
  • Using Props In React
  • React Routing
  • A Basic Intro to Redux
  • Using MongoDB
  • Data Modeling with Mongoose
  • Testing With Jest

Sound good? You know what to do!

FAQ

Help! I lost my email

Drop me a line and we’ll get you sorted out.

What Version of React does this cover?

The course was written for React 16.1

Why are you still using Redux instead of the new Context API?

Once the Context API solidifies, I’ll be releasing an inexpensive expansion pack showing how to convert from Redux to Context. For now, Redux is what’s being used out there in the real world, so that’s what I’m teaching.

What if I don't use Sublime Text?

You'll be fine in Atom, VS Code, or the text editor of your choice. Nothing in this tutorial requires Sublime, but I can't provide any info on syntax highlighting, code formatting, or linting in other editors.

How do I view the videos?

If you bought the React-only version, you’ll be emailed a link to a course listing that contains links to all of your lessons.

If you buy the full version, you'll get a full course listing too, but you can also download all the videos as sweet, sweet, 1080p resolution MP4 files. The total size of the course is approximately 11.5 GB.

Do you offer support?

Yes and no. I do hang out in the Slack and will help you get unstuck, but I don’t debug code.

How Long is the Money-Back Guarantee Good For?

Thirty days from date of purchase. If during that time you're not fully satisfied with your purchase, I'll refund 100%.

I live in a country with a much lower yearly average income than the US. Do you offer discounts for that?

Absolutely. Contact me and I'll get you taken care of.

Do you offer volume discounts for businesses looking to train multiple developers?

I do indeed. Contact me for more information.

I’m a broke student. Can I get a discount?

Yep! Just get in touch and I’ll send you the details.