The Complete React Developer Course (w/ Hooks and Redux)

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.

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!

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

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

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

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.

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

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.

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

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.

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

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

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

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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.

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.

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.

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

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

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

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

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

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. 

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

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

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