React 2nd Edition

Tags: React

Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

Last updated 2022-01-10 | 4.6

- Build
- test
- and launch React apps
- Use cutting-edge ES6/ES7 JavaScript
- Setup authentication and user accounts

What you'll 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

* Requirements

* A computer on which you can install software (Windows
* MacOS
* or Linux)
* An understanding of core JavaScript (functions
* objects
* arrays
* callback functions)

Description

This course was just updated to support React v16, React Hooks, the Context API, and more!

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:

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.
The second app, an expense manager called Budget, 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:

React
Redux
React-Router
Webpack
Babel
Testing with Jest
Enzyme
App Debugging
App Deployment
Firebase
Authentication
Git/GitHub
ES6/ES7
And many more tools

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

- Andrew

Who this course is for:

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

Course content

19 sections • 200 lectures

Welcome 2 lectures

Welcome & Asking Good Questions Preview 04:53

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

"Why should I learn React?" Preview 05:10

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

Setting up Your Environment 3 lectures

Section Intro: Setting up Your Environment Preview 00:50

Installing Visual Studio Code Preview 01:35

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.

Installing Node.js & Yarn Preview 04:24

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!

Hello React 16 lectures

Section Intro: Hello React Preview 02:07

Setting up a Web Server Preview 12:00

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

Hello React Preview 18:38

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

Setting up Babel Preview 17:26

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

Exploring JSX Preview 14:43

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.

JSX Expressions Preview 10:20

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

Conditional Rendering in JSX Preview 22:34

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.

ES6 Aside: const and let Preview 16:29

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: Arrow Functions Preview 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 Preview 19:57

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.

Events and Attributes Preview 16:39

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).

Manual Data Binding Preview 11:52

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

Forms and Inputs Preview 17:53

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

Arrays in JSX Preview 14:15

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.

Picking an Option Preview 08:31

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

Build It: Visibility Toggle Preview 09:10

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.

React Components 17 lectures

Section Intro: React Components Preview 01:18

Thinking in React Preview 07:21

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

ES6 Classes: Part I Preview 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 Preview 18:07

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

Creating a React Component Preview 14:36

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

Nesting Components Preview 05:43

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

Component Props Preview 13:34

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

Events & Methods Preview 10:34

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

Method Binding Preview 11:24

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

What Is Component State? Preview 06:50

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

Adding State to Counter App: Part I Preview 08:18

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

Adding State to Counter App: Part II Preview 11:00

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

Alternative setState Syntax Preview 07:15

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

Build It: Adding State to VisibilityToggle Preview 08:13

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

Indecision State: Part I Preview 17:06

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

Indecision State: Part II Preview 14:33

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

Summary: Props vs. State Preview 03:41

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

Stateless Functional Components 8 lectures

Section Intro: Stateless Functional Components Preview 00:54

The Stateless Functional Component Preview 13:47

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

Default Prop Values Preview 09:49

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

React Dev Tools Preview 07:03

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

Removing Individual Options Preview 16:22

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

Lifecycle Methods Preview 10:07

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

Saving and Loading Options Data Preview 14:36

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

Saving and Loading the Count Preview 10:34

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

Webpack 12 lectures

Section Intro: Webpack Preview 01:15

What Is Webpack? Preview 09:06

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

Avoid Global Modules Preview 08:25

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

Installing & Configuring Webpack Preview 16:31

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.

ES6 import/export Preview 18:32

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

Default Exports Preview 11:18

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

Importing npm Modules Preview 11:28

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

Setting up Babel with Webpack Preview 09:27

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

One Component per File Preview 18:12

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

Source Maps with Webpack Preview 05:16

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

Webpack Dev Server Preview 08:48

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

ES6 class properties Preview 17:33

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

Using a Third-Party Component 4 lectures

Section Intro: Using a Third-Party Component Preview 01:13

Passing Children to Component Preview 06:25

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

Setting up React-Modal Preview 18:45

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

Bonus: Refactoring Other Stateless Functional Components Preview 02:25

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

Styling React 11 lectures

Section Intro: Styling React Preview 00:49

Setting up Webpack with SCSS Preview 13:16

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

Architecture and Header Styles Preview 14:48

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

Reset That $#!* Preview 04:58

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

Theming with Variables Preview 14:18

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

Big Button & Options List Preview 15:24

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

Styling the Options List Preview 14:13

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

Styling Option Item Preview 16:40

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

Styling React-Modal Preview 18:00

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

Mobile Considerations Preview 12:57

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

Bonus: Favicon Preview 02:53

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

React-Router 9 lectures

Section Intro: React Router Preview 02:49

Server vs. Client Routing Preview 04:39

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.

Setting Up Budget App Preview 06:54

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

React-Router 101 Preview 20:13

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

Setting up a 404 Preview 05:58

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.

Linking Between Routes Preview 14:08

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.

Organizing Our Routes Preview 12:30

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.

Query Strings and URL Parameters Preview 09:10

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

Build It: Router for Portfolio Site Preview 18:27

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

Redux 15 lectures

Section Intro: Redux Preview 01:35

Why Do We Need Something Like Redux? Preview 13:33

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

Setting up Redux Preview 07:53

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

Dispatching Actions Preview 13:00

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

Subscribing and Dynamic Actions Preview 09:35

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.

ES6 Object Destructuring Preview 15:49

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

ES6 Array Destructuring Preview 10:38

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

Refactoring and Organizing Preview 16:41

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

Reducers Preview 12:05

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.

Working with Multiple Reducers Preview 13:40

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.

ES6 Spread Operator in Reducers Preview 17:36

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

Spreading Objects Preview 14:36

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

Wrapping up Our Reducers Preview 09:52

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

Filtering Redux Data Preview 16:54

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.

Sorting Redux Data Preview 06:14

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

React with Redux 13 lectures

Section Intro: Connecting React and Redux Preview 01:06

Organizing Redux Preview 15:02

In this video you'll organize Redux by breaking things out into their own location.

The Higher Order Component Preview 15:30

In this video you'll learn about the higher order component pattern. This lets you create a wrapper component that can be reused to manipulate other components.

Connecting Store and Component with React-Redux Preview 15:40

In this video you'll learn how to connect a React component to the Redux store. This allows each component to define what data it needs from the store (if any).

Rendering Individual Expenses Preview 09:09

In this video you'll use react-redux to render the expenses list to the UI.

Controlled Inputs for Filters Preview 14:21

In this video you'll learn about controlled inputs. This just means an input whose value is controlled by JavaScript, and not the just the user.

Dropdown for Picking SortBy Preview 08:41

In this video you'll setup controlled input using the HTML select dropdown.

Creating Expense Add/Edit Form Preview 20:09

In this video you'll be creating the expense form component. This will be used for both adding and editing expenses.

Setting up a Date Picker Preview 21:34

In this video you'll be using react-dates to setup a date picker. It's a great date picker React library release by the folks at Airbnb.

Wiring up Add Expense Preview 16:44

In this video you'll wire up the add expense form to actually add an expense!

Wiring up Edit Expense Preview 19:06

In this video you'll wire up the edit expense form to actually edit an expense!

Redux Dev Tools Preview 05:33

In this video you'll setup the Redux developer tools. This is a Chrome extension that makes it easy to debug anything related to the Redux store.

Filtering by Dates Preview 19:44

In this video you'll use react-dates to setup a date filter. That'll let users pick and start and stop date for filtering their data.

Testing Your Application 17 lectures

Section Intro: Testing React Components Preview 03:03

Setting up Jest Preview 19:34

In this video you'll setup Jest. Jest is the testing framework commonly used with React applications since it comes with some great React testing tools like snapshots.

Testing Expenses Action Generators Preview 16:55

In this video you'll be kicking off testing by testing the action generators.

Testing Filters Action Generators Preview 11:06

In this video you'll continue testing by adding test cases for the filter actions.

Testing Expenses Selector Preview 17:03

In this video you'll test the most complex function by far, the expenses selector.

Testing Filters Reducer Preview 14:07

In this video you'll learn how to test reducers. Reducers are just functions, so the same testing principals will apply. Call the function with some data. Assert something about the return value.

Testing Expenses Reducer Preview 15:10

In this video you'll continue testing reducers with the expenses reducer.

Snapshot Testing Preview 12:13

In this video you'll learn about snapshot testing. This makes it easy to track what a component renders without needing overly complex test cases.

Enzyme Preview 21:53

In this video you'll setup an use enzyme to simplify the snapshot tests.

Snapshot Testing with Dynamic Components Preview 15:42

In this video you'll use snapshot testing with a React component that requires props.

Mocking Libraries with Jest Preview 11:51

In this video you'll be mocking out third-party libraries. This make it easy to write test cases that depend on things like time.

Testing User Interaction Preview 16:54

In this video you'll learn how to simulate user interaction in your test cases. That means you can "click" a button and make sure the correct changes are made.

Test Spies Preview 17:39

In this video you'll work with test spies. Spies let you track if a function was called or not. You can then make assertions that a give spy was or was not called.

Testing AddExpensePage Preview 14:39

In this video you'll write tests cases for the AddExpensePage component.

Testing EditExpensePage Preview 19:00

In this video you'll write test cases for the EditExpensePage component.

Testing ExpenseListFilters Preview 14:50

In this video you'll write test cases for the ExpenseListFilters component.

Testing ExpenseListFilters: Part II Preview 12:27

In this video you'll wrap up the test cases for the ExpenseListFilters component.

Deploying Your Apps 13 lectures

Section Intro: Deploying Your Apps Preview 01:00

Installing Git Preview 04:26

In this video you'll install and use Git. Git is the version control system you'll be using to track code changes over time.

What is Git? Preview 05:17

In this video you'll get a high level overview of what Git is and how it works.

Integrating Git into Our Project Preview 12:54

In this video you'll learn the basics of Git by creating a new repository and adding your first commits.

Setting up SSH and Github Preview 18:08

In this video you'll learn how to setup ssh keys so you machine can securely communicate with third-party services like GitHub.

Production Webpack Preview 13:07

In this video you'll learn how to customize the webpack build for production and development purposes.

Creating Separate CSS Files Preview 16:47

In this video you'll learn how to create a separate CSS file so you can load your styles fast.

A Production Web Server with Express Preview 13:14

In this video you'll use Node and Express to create a 9 line production web server.

Deploying with Heroku Preview 16:44

In this video you'll deploy the expense manager live to the web.

Regular vs Development Dependencies Preview 15:36

In this video you'll optimize your dependencies for development and production. For example, does Heroku really need to install Jest in order to run? No, so let's explore how we can optimize our dependencies for Heroku.

New Feature Workflow Preview 12:32

In this video you'll take a look at the basic workflow for adding, testing, and deploying a new feature.

Build It: Adding Total Selector Preview 17:25

In this video it'll be your job to add a brand new feature to the expense manager.

Build It: Adding Summary Component Preview 18:39

In this video you'll continue working on the new feature from the previous video.

Firebase 101 10 lectures

Section Intro: Firebase 101 Preview 01:11

Getting Firebase Preview 11:40

If this video you'll be setting up your Firebase database. You'll also learn how to connect to the database from your JavaScript code.

Writing to the Database Preview 14:59

In this video you'll learn how you can write data to your Firebase database. This will allow you to store user data for their next visit.

ES6 Promises Preview 14:30

In this video you'll learn how you can use ES6 promises to sync up your asynchronous actions.

Promises with Firebase Preview 10:54

In this video you'll use promises with Firebase to run some code if a Firebase operations succeeds or fails.

Removing Data from Firebase Preview 05:42

In this video you'll learn how you can remove data from Firebase.

Updating Data Preview 10:41

In this video you'll learn how you can update data inside of a Firebase database.

Fetching Data From Firebase Preview 17:54

In this video you'll learn how you can fetch data from a Firebase database.

Array Data in Firebase: Part I Preview 15:12

In this video you'll learn about arrays in Firebase. Firebase doesn't support arrays by default. We'll talk about why that is and what you can do to manage a list of expenses.

Array Data in Firebase: Part II Preview 14:56

This video is a continuation of the last one about arrays in Firebase.

Firebase with Redux 10 lectures

Section Intro: Firebase with Redux Preview 01:18

Asynchronous Redux Actions Preview 18:49

In this video you'll learn how you can use asynchronous Redux actions to change Firebase and the Redux store.

Testing Async Redux Actions: Part I Preview 16:59

In this video you'll learn how you can test your asynchronous Redux actions.

Testing Async Redux Actions: Part II Preview 12:12

In this video you'll learn how you can test your asynchronous Redux actions with Jest.

Creating a Separate Test Database Preview 21:15

In this video you'll learn how to create a separate test database with Firebase. This allows us to setup dummy test data without deleting real user data.

Heroku Environment Variables Preview 06:38

In this video you'll learn how to create and manage environment variables on Heroku.

Fetching Expenses: Part I Preview 12:38

In this video you'll learn how to use async Redux actions to fetch data from Firebase.

Fetching Expenses: Part II Preview 13:52

In this video you'll learn how to use async Redux actions to fetch data from Firebase.

Remove Expense Preview 12:03

In this video you'll be responsible for wiring up the ability to remove expenses from Firebase.

Update Expense Preview 10:31

In this video you'll be responsible for wiring up the ability to update expenses in Firebase.

Firebase Authentication 9 lectures

Section Intro: Firebase Authentication Preview 00:59

Login Page and Google Authentication Preview 19:26

In this video you'll set up the login page and Google authentication.

Logging Out Preview 11:05

In this video you'll set up a logout button allowing users to logout of the application.

Redirecting Login or Logout Preview 12:48

In this video you'll learn how to redirect the user as they login and logout of the application.

The Auth Reducer Preview 15:49

In this video you'll learn how to setup an auth reducer so you can store the user id of the logged in user.

Private Only Routes Preview 13:04

In this video you'll setup a higher order component to prevent users from navigating to a given route unless they're logged in.

Public Only Routes Preview 05:29

In this video you'll setup a higher order component to prevent users from navigating to a given route unless they're logged out.

Private Firebase Data Preview 18:33

In this video you'll use Firebase rules to lock down access to the database.

Data Validation and Deployment Preview 14:58

In this video you'll use Firebase rules to validate the data that's getting sent to Firebase.

Styling Budget App 12 lectures

Section Intro: Styling Budget App Preview 00:33

Styling Login Page Preview 13:45

In this video you'll style the login page.

Styling Buttons Preview 15:35

In this video you'll style the application header.

Styling Summary Area Preview 12:20

In this video you'll style the page summary area.

Styling List Filters Preview 10:05

In this video you'll style the list filters.

Styling Inputs Preview 11:30

In this video you'll style the form inputs.

Styling Expense Form Preview 13:19

In this video you'll style the expense form.

Styling Expenses List: Part I Preview 13:03

In this video you'll style the expense list.

Styling Expenses List: Part II Preview 17:58

In this video you'll continue styling the expense list.

Adding Loader Preview 09:26

In this video you'll add a loader gif into the application.

Babel Polyfill Preview 04:55

In this video you'll setup babel-polyfill to improve cross browser support.

Final Deployment Preview 01:57

In this video you'll deploy the expense manager for the final time.

What Now? 6 lectures

Section Into: What Now? Preview 01:35

Creating the Final Boilerplate Preview 18:05

In this video you'll setup the final boilerplate project. This is something you can clone and reuse when starting a new React app!

Budget App Enhancements Preview 03:18

In this video I'll go over a few ideas for features you can add to Expensify.

Indecision App Enhancements Preview 01:09

In this video I'll go over a few ideas for features you can add to Indecision.

New App Idea: Blog Preview 02:48

In this video I'll give you an idea of a blog application you can now build with the skills you have.