The Complete React Web App Developer Course

Learn React & Redux By Creating 5 Apps
4.7 (1,758 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
9,096 students enrolled
$19
$55
65% off
Take This Course
  • Lectures 158
  • Length 29.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English

Course Description

I've just added new content to the course that covers new React features and ensures all projects work with the latest version of React (v15.3.2). Enjoy!

There is no better time than now to learn React. According to the 2016 Stack Overflow Survey, React is in the top ten for developer salaries and it's the #1 fastest growing technology. That means more jobs and more opportunities for you.

I've designed this course around one goal: Turning you into a professional React developer capable of developing, testing, and deploying real-world production applications.

Learn React by building.

This course is project-based. You're responsible for writing code in every video as well as completing challenges I've designed to help test and reinforce what you've learned. This course is about creating, not watching!

You'll be programming and deploying three React apps:

  1. A weather application
  2. A countdown/timer app
  3. A todo application with social login and Firebase integration

This course covers more than just React. You'll learn about the rich ecosystem of 3rd-party tools, such as:

  1. React
  2. Redux
  3. Webpack
  4. Firebase
  5. Git/GitHub
  6. Heroku
  7. Chrome developer tools
  8. React and Redux developer tools
  9. Karma
  10. Mocha
  11. Foundation
  12. Axios
  13. And more!


Why React?

With so many alternative frameworks out there, the question has to be asked. Why React? 

  1. React has a small learning curve and comes with fantastic documentation.
  2. React is fast and extensible
  3. React comes with a preprocess called JSX that simplifies HTML templates.
  4. React has an awesome community of open source developers creating great tools and libraries. It's used and supported by companies like Facebook, Netflix, Airbnb, and more.


Access to fast support and a community of like-minded students.

I offer fast and friendly support. You won't have to sit around hoping someone will actually reply. I answer every single question that students post in a timely manner.

I can't wait to see you inside!

- Andrew 

What are the requirements?

  • A computer on which you can install software (Windows, MacOS, or Linux)
  • A basic understanding of HTML, CSS, and JavaScript

What am I going to get from this course?

  • You'll learn how to develop, test, and deploy React web applications
  • Understand the rich ecosystem of 3rd-party libraries like Redux and Webpack
  • Learn how to setup and automate testing using Karma and Mocha
  • Learn to style applications using the Foundation framework

What is the target audience?

  • Anyone looking to launch their own React applications, switch careers, or freelance as a React developer

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Intro
Why Should I Learn React?
Preview
02:07
Section 2: Getting Setup
Installing Atom
Preview
01:55
Installing Git & Bash (Important For Windows Users)
Preview
03:16
Intro To Command Line
Preview
07:02
Installing Node.js
Preview
02:28
Section 3: Hello React
Creating Your Web Server
Preview
11:38
Hello React!
08:22
Atom Editor Plugins (Optional)
03:22
Your First React Component
07:21
Learning JSX
05:43
Component Properties
08:47
User Events & Callbacks
06:19
Component State
08:32
Nested Components: Part 1
10:24
Nested Components: Part 2
12:35
Aside: Props & State
02:32
Section Challenge
10:54
React Basics Quiz
6 questions
Section 4: A Better React Project
What is Webpack? (And Installing It)
09:41
Generating Our Bundle
06:29
The Webpack Config File
05:23
Adding Babel & JSX Support
09:01
Refactoring Your Components
09:42
Webpack: Custom Package Names
05:40
Boilerplate Project
06:11
Bonus: Using Experimental JavaScript Features
04:48
Section 5: Routing & Our Weather App
Front-end Routing
04:10
Adding React-Router
16:17
Creating Our Pages
16:39
Why use <Link/>?
08:14
Creating WeatherForm & WeatherMessage
09:57
Exploring OpenWeatherMap.org
09:28
ES6 Promises
18:02
Faking Our Call
13:17
Making Our API Call
17:49
Adding Loading Text
09:36
Debugging & The React Developer Tools
07:20
Source Map Library Issue
Article
Advanced Debugging
11:43
ES6 Aside: Arrow Functions
15:29
Refactoring: Stateless Functional Components
11:37
Section 6: Deploying Your App To Production
Intro: Tools You'll Use
01:33
Installing Git
03:33
Adding Git To Your App
11:00
Joining GitHub & Generating SSH Keys
11:00
Pushing To GitHub
07:30
Heroku Signup & Toolbelt
05:04
Deploying Your App
11:05
Fixing localhost
04:05
Feature Workflow
09:12
Section 7: Styling Your App With Foundation
Intro: Foundation
02:03
Installing Foundation
10:28
Styling Navigation
14:36
Styling Examples Page
12:06
Styling About Page
05:59
Styling Weather Page
06:42
Adding A Modal For Errors (Part 1)
16:32
Adding A Modal For Errors (Part 2)
13:14
Adding Custom CSS
12:12
Setting Up SCSS
10:10
Linking To Location & Wiring Up Nav Form
17:12
Fixing The Error Modal
07:45
Updating Our Boilerplate
10:11
Section 8: Testing & Component Lifecycle
Project Overview
02:51
Component Breakdown
02:13
Adding The Navigation Bar
15:35
Customizing The Navigation Bar
19:56
Basics Of Testing
17:37
Configuring Tests With Webpack & React
19:41
Adding Routes & Container Components
13:16
Clock Component
17:17
Clock Component: Part 2
18:10
Countdown Form
19:08
Testing Our Form With Spies
16:14
Starting The Count Down
11:38
Testing That Counting Down Works
12:16
Creating Our Controls
17:52
Pausing, Starting, and Resetting
15:48
Component Lifecycle
11:16
Testing Pausing & Resetting
12:21
Project Setup: Timer
03:11
Project Solution: Timer (Part 1)
09:13
Project Solution: Timer (Part 2)
17:07
Foundation Settings & Karma Issues
12:59
Final Boilerplate
08:42
Section 9: Building A Todo Application
App Demo & Learning Goals
05:27
Creating The Root Component (TodoApp)
12:37
Rendering Lists In React (TodoList & Todo)
14:05
Testing List Components
13:14
Challenge: AddTodo Is On You!
18:27
Setting Up The Filter Component
13:50

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Andrew Mead, A Full-stack Developer & Teacher

I'm Andrew, a full-stack developer living in beautiful Philadelphia!

I launched my first Udemy course in 2014 and had a blast teaching and helping others. Since then, I've launched 3 courses with over 21,000 students and over 1,900 5-star reviews.

I currently teach Node, Gulp, and React.

Before I ever heard about Udemy or thought about teaching, I created a web app development company. I've helped companies of all sizes launch production web applications to their customers. I've had the honor of working with awesome companies like Siemens, Mixergy, and Parkloco.

I have a Computer Science degree from Temple University, and I've been programming for just over a decade. I love creating, programming, launching, learning, teaching, and biking.

I can't wait to see you inside one of my courses!

Ready to start learning?
Take This Course