The Complete React Web Developer Course (2nd Edition)
4.9 (255 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.
2,830 students enrolled
Wishlisted Wishlist

Please confirm that you want to add The Complete React Web Developer Course (2nd Edition) to your Wishlist.

Add to Wishlist

The Complete React Web Developer Course (2nd Edition)

Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!
4.9 (255 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.
2,830 students enrolled
Created by Andrew Mead
Last updated 9/2017
English
English [Auto-generated]
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 36 hours on-demand video
  • 153 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build, test, and launch React apps
  • Use cutting-edge ES6/ES7 JavaScript
  • Setup authentication and user accounts
  • Deploy your React apps live to the web
  • Learn the latest React libraries and tools
  • Master React, Redux, React-Router, and more
View Curriculum
Requirements
  • A computer on which you can install software (Windows, MacOS, or Linux)
  • An understanding of core JavaScript (functions, objects, arrays, callback functions)
Description

Have you tried to learn React before?

It’s easy to go down the rabbit hole of libraries and tools only to come out of it not knowing how to build and launch a real-world React application. You get things configured, but you’re not sure how the libraries fit together (or if you’re even using the right one).

Sound familiar?

I built this course to show you how you can build and launch real-world React web applications.

The Complete React Web Developer Course 2 starts with the fundamentals and covers everything you’ll need to build and launch React web apps.

You’ll see what it takes to build and launch a React app, from the first line of code to the final production deployment.

This course was designed around one goal: turning you into a professional React developer capable of developing, testing, and deploying real-world production applications.

You’ll learn React by doing, not watching.

From the first videos you’ll be building out each project as well as completing programming challenges I’ve designed to test and reinforce what you’ve learned.

Throughout the course you’ll build two React web apps:

  1. The first app, a decision-making app called Indecision, is our starter application. You’ll learn the fundamentals of React while seeing exactly what it takes to get a React app up and running.
  2. The second app, an expense manager called Expensify, has all the features you’d expect from a real application. You’ll set up authentication, user accounts, routing, testing, form validation, database storage, and more.

Stay up-to-date in an ever changing world.

The world of React changes fast, and that’s why I’m always working to keep this course as up-to-date as possible. You can jump in knowing you’re getting access to hot-off-the-press features.

Everything you need comes in one easy-to-use package.

There’s no need to worry if you’re learning the right skills to land that React job or launch that React app. I’ve mapped out everything you need to know in an interactive easy-to-follow package designed to get you up and running in a couple of weeks.

There’s no better time to learn React.

React’s not going anywhere. Companies like Facebook, Walmart, Uber, Airbnb, and Netflix are all using React in production right now.

They’ve also made heavy investments in the React ecosystem, creating new libraries and tools that speed up and simplify React development. From the biggest to the smallest, everyone’s using React and new jobs are popping up every day.

Get access to fast support if you get stuck.

There’s nothing worse than getting stuck ten hours into a course and not getting the help you need to continue. Getting stuck is part of the learning process. That’s why I’m here to answer every single question.

I’ll work with you to get you unstuck and back on track. It’s one of the reasons students love taking my courses:

“This is the absolute best course I've taken on udemy. Andrew is amazing at explaining things concisely, and the flow of the course is perfect. He doesn't skip over anything and he doesn't over-explain anything. On top of all that, he responds to questions so quickly that you won't be stuck at any point." - Tanya Gamarian

"The lessons are of high quality and even more important, he actually takes time to answer your questions!" - Thomas Vercamer

"The instructor does an excellent job in explaining how to build React Apps. He also responds quickly to any questions that are asked." - Matt Willy

I guarantee that this is the most up-to-date and engaging React course available, and it comes with a Udemy 30-day money-back guarantee.

Over eighteen sections you’ll learn:

  1. React

  2. Redux

  3. React-Router

  4. Webpack

  5. Babel

  6. Testing with Jest

  7. Enzyme

  8. App Debugging

  9. App Deployment

  10. Firebase

  11. Authentication

  12. Git/GitHub

  13. ES6/ES7

  14. And many more tools

I can’t wait to see you on the inside!

- Andrew

Who is the target audience?
  • Anyone looking to launch their own React applications, switch careers, or freelance as a React developer
Students Who Viewed This Course Also Viewed
Curriculum For This Course
187 Lectures
35:54:28
+
Welcome
2 Lectures 05:31

In this video you'll learn a few tips and tricks to make sure you get the most out of this course.

Preview 02:10

In this video you'll get a big picture overview of what React is and why you should spend your time learning it.

Preview 03:21
+
Setting up Your Environement
3 Lectures 06:27

Need a text editor? Try Visual Studio Code. You can use any editor you like, but I've been loving VSC lately. It's worth checking out.

Preview 01:35

The last thing you need to install is Node.js. You'll be using Node.js to create web servers, compile files, and much more!

Preview 04:24
+
Hello React
16 Lectures 03:43:40

In this video you'll how to set up a web server so you can view your React apps in the browser.

Preview 12:00

In this video you'll take your first look at JSX (JavaScript XML). It's a JavaScript language extensions used by React.

Preview 18:00

In this video you'll setup Babel. This compiles your JSX into regular JavaScript that your browser understands.

Preview 17:26

In this video you'll explore the basics of JSX. You'll see what it takes to define your template and get it rendered to the screen.

Preview 14:43

In this video you'll learn how to inject dynamic values into your JSX.

Preview 10:20

In this video you'll learn how to conditionally render content in JSX. This will allow you to hide and show content based on the application state.

Conditional Rendering in JSX
22:34

In this video you'll learn about two new variable types which are "const" and "let". You'll also explore the differences between "var", "const", and "let".

ES6 Aside: const and let
16:29

In this video you'll learn about ES6 Arrow Functions. This is a new way to create functions in ES6 and comes with an improved syntax.

ES6 Aside: Arrow Functions
12:36

In this video you'll learn about ES6 Arrow Functions. This is a new way to create functions in ES6 and comes with an improved syntax.

ES6 Aside: Arrow Functions Part II
19:57

In this video you'll learn about event handlers in JSX. These will allow you to run some code when the user interacts with the app (such as clicking a button).

Events and Attributes
16:39

In this video you'll learn how you can rerender you application when data changes.

Manual Data Binding
11:52

In this video you'll learn how to setup form and inputs so you can get data from your users.

Forms and Inputs
17:53

In this video you'll learn how to work with array data in JSX. That'll let you render some content to the screen for each item in a list.

Arrays in JSX
14:15

In this video you'll be adding a new feature onto the Indecision app.

Picking an Option
08:31

In this video you'll be writing some code on your own. I'll set you up, but it's on you to write the solution.

Build It: Visibility Toggle
09:10
+
React Components
17 Lectures 02:59:34
Section Intro: React Components
00:27

In this video you'll learn how to think in terms of how React works.

Thinking in React
07:21

In this video you'll learn how to work with ES6 classes. Classes will be used to create React components.

ES6 Classes: Part I
20:52

In this video you'll learn how to work with ES6 classes. Classes will be used to create React components.


ES6 Classes: Part II
18:07

In this video you'll create and render your first React component.

Creating a React Component
14:36

In this video you'll learn how you can create a React component that renders another React component.

Nesting Components
05:43

In this video you'll learn how to use component props. This lets you pass data into a component when rendering it.

Component Props
13:34

In this video you'll add event props and event handlers into your components.

Events & Methods
10:34

In this video you'll explore class method binding and why it's important.

Method Binding
11:24

In this video you'll learn about component state. Component state is the React way to track changing data in your components. 

What Is Component State?
06:50

In this video you'll add component state into the course application.

Adding State to Counter App: Part I
08:18

In this video you'll add component state into the course application.

Adding State to Counter App: Part II
11:00

In this video you'll look at an alternative way you can change component state.

Alternative setState Syntax
07:15

In this video you'll be writing some code on your own!

Build It: Adding State to VisibilityToggle
08:13

In this video you'll be adding state to Indecision.

Indecision State: Part I
17:06

In this video you'll be adding state to Indecision.

Indecision State: Part II
14:33

In this video you'll get a quick recap of component props and state.

Summary: Props vs. State
03:41
+
Stateless Functional Components
8 Lectures 01:22:54
Section Intro: Stateless Functional Components
00:36

In this video you'll explore an alternative way to define React components known as the Stateless Functional Component.

The Stateless Functional Component
13:47

In this video you'll learn how you can setup default props values for your React components.

Default Prop Values
09:49

In this video you'll learn how you can debug your React applications.

React Dev Tools
07:03

In this video you'll be adding a new feature onto Indecision.

Removing Individual Options
16:22

In this video you'll explore component lifecycle methods. These let you run some code at specific times during a components life.

Lifecycle Methods
10:07

In this video you'll learn how you can use localStorage to persist state between page views.

Saving and Loading Options Data
14:36

In this video you'll get a bit more experience working with localStorage and React lifecycle methods.

Saving and Loading the Count
10:34
+
Webpack
12 Lectures 02:14:48
Section Intro: Webpack
00:42

In this video you'll learn what webpack is and why using it is a good idea.

What Is Webpack?
09:06

In this video you'll learn why global npm modules are a bad idea.

Avoid Global Modules
08:06

In this video you'll be installing and setting up webpack. Config videos are never fun, but webpack opens the door to a lot of great features.

Installing & Configuring Webpack
16:31

In this video you'll learn how you can break your app into multiple files using import/export.

ES6 import/export
18:32

In this video you'll explore another way you can export something from a module.

Default Exports
11:18

In this video you'll learn how you can use import to load in 3rd-party npm modules.

Importing npm Modules
11:17

In this video you'll setup webpack to run babel automatically.

Setting up Babel with Webpack
09:27

In this video you'll continue to break up your app into multiple files.

One Component per File
18:12

In this video you'll setup sourcemaps with webpack. This makes debugging errors a whole lot easier.

Source Maps with Webpack
05:16

In this video you'll setup webpack dev-server which makes local webpack development a breeze.

Webpack Dev Server
08:48

In this video you'll explore the new class properties syntax which make it easier to setup class properties like state!

ES6 class properties
17:33
+
Using a Third-Party Component
4 Lectures 28:20
Section Intro: Using a Third-Party Component
00:45

In this video you'll explore the children prop which makes it possible to add children into your JSX element.

Passing Children to Component
06:25

In this video you'll setup react-modal. This 3rd-party tool make it easy to setup a modal for displaying the selected option.

Setting up React-Modal
18:45

In this video you'll refactor some class components to stateless functional components.

Bonus: Refactoring Other Stateless Functional Components
02:25
+
Styling React
11 Lectures 02:08:04
Section Intro: Styling React
00:37

In this video you'll setup webpack to compile SCSS down to CSS.

Setting up Webpack with SCSS
13:16

In this video you'll be diving into the style by styling the Indecision app header.

Architecture and Header Styles
14:48

In this video you'll learn how to setup normalize.css. This CSS reset makes sure all browsers are starting from the same base.

Reset That $#!*
04:58

In this video you'll use SCSS variables to setup a theme for Indecision.

Theming with Variables
14:18

In this video you'll be setting up that big ol' button up top.

Big Button & Options List
15:24

In this video you'll be styling the options list and list items.

Styling the Options List
14:13

In this video you'll be styling the individual items.

Styling Option Item
16:40

In this video you'll learn how to style react-modal (which can be a little tricky). 

Styling React-Modal
18:00

In this video you'll setup media queries to style Indecision for those mobile devices.

Mobile Considerations
12:57

In this video you'll setup a favicon for browser tabs.

Bonus: Favicon
02:53
+
React-Router
9 Lectures 01:33:00
Section Intro: React Router
01:28

In this video you'll explore the differences between server and client side routing. You'll also explore why you'd want to use one over the other.

Server vs. Client Routing
04:39

In this video you'll be setting up the directory structure for the Expensify application.

Setting Up Expensify
06:54

In this video you'll setup react router. You'll learn how you can create multiple pages via client-side routing.

React-Router 101
19:46

In this video you'll learn how to setup a 404 page for your application. This is a page users will see if the URL they entered doesn't match any existing routes.

Setting up a 404
05:58

In this video you'll learn how to setup UI links for switching pages. This will be especially useful for setting up the apps navigation menu.

Linking Between Routes
14:08

In this video you'll refactor the application router. You'll move it out into it's own file and clean up app.js as much as possible.

Organizing Our Routes
12:30

In this video you'll learn how to parse query strings and params with react-router.

Query Strings and URL Parameters
09:10

In this video you'll be creating a new application to practice configuring react-router.

Build It: Router for Portfolio Site
18:27
+
Redux
15 Lectures 02:58:50
Section Intro: Redux
00:44

In this video you'll learn what redux is and why we'll need it to continue on with our app.

Why Do We Need Something Like Redux?
13:33

In this video you'll install Redux and use it to create your first Redux store.

Setting up Redux
07:53

In this video you'll learn how to dispatch actions. Actions are instructions that get set to the store to change the store data.

Dispatching Actions
13:00

In this video you'll learn how to subscribe to changes in the Redux store. That means you'll be able to run some code whenever the data changes. 

Subscribing and Dynamic Actions
09:35

In this video you'll learn about ES6 Object Destructuring. It's a way to create variables based on properties from an object.

ES6 Object Destructuring
15:49

In this video you'll learn about ES6 Array Destructuring. It's a way to create variables based on items in an array.

ES6 Array Destructuring
10:38

In this video you'll refactor Redux by moving each part into it's own file.

Refactoring and Organizing
16:41

In this video you'll learn about reducers (something you've actually already used). Reducers describe how the store should changed based on a given action.

Reducers
12:05

In this video you'll learn how to setup your Redux store with multiple reducers. This lets you keep the individual reducers small and focused.

Working with Multiple Reducers
13:40

In this video you'll cover another ES6 feature, the spread operator.

ES6 Spread Operator in Reducers
17:36

In this video you'll learn how the ES6 spread operator can be used with objects.

Spreading Objects
14:36

In this video you'll finish off the reducers for Indecision.

Wrapping up Our Reducers
09:52

In this video you'll learn about Redux selectors. This is just a function that gets called with the Redux store data and returns a subset of the data. Selectors are great for filtering data based on some criteria.

Filtering Redux Data
16:54

In this video you'll expand on the Redux selector by allowing data to be stored by amount or description.

Sorting Redux Data
06:14
8 More Sections
About the Instructor
Andrew Mead
4.7 Average rating
8,057 Reviews
40,996 Students
4 Courses
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!