React Js And Redux Mastering Web Apps

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

Last updated 2022-01-10 | 4.4

- Learn React the right and learn best practices.
- Dive into the React engine
- and learn how it works under the hood.
- See how React fits in the big picture of web development.

What you'll learn

Learn React the right and learn best practices.

Dive into the React engine

and learn how it works under the hood.

See how React fits in the big picture of web development.

Learn how to build applications from scratch.

Cover the crucial concepts of bundling and transpiling

and create frontend application build systems.

* Requirements

* Familiarity with JavaScript
* HTML
* and CSS will help.

Description

Announcement:

As of January 2019, this course has been completely updated with all new material!

The new content follows all the best practices of modern React development, and will take you even deeper into the React engine. There is a far better exploration of where React fits in the overall big picture of web development. And just like before, the course will teach how to create React applications as you build your own React projects along with the tutorial.

*****

Want to learn how to create React applications the right way?

With five minutes of your time, I’ll explain why this course is the best invesment of time you can make to learn how to code React apps.

*****

When I was first learning web development and software engineering, I used courses, tutorials, stackoverflow threads, and public github projects. It was invigorating - teaching myself the skills that would start a career.

But I often found that tutorials only showed me what methods to use. I had to piece together examples, trying to figure out why examples were working - why bugs were popping up. Even when I found a code fix, there was often that missing layer of how the update addressed the problem.

It was a grind, and the learning process could have been more efficient with better resources.

Fast forward five years, and I’m working as a full-stack software engineer at Zendesk in San Francisco. I often think back to those first couple years teaching myself web development.

The resources could have been better, more efficient, giving me not only what to write, but why the fix addresses the issue, and how the code works under the hood.

So that is what I’ve created in this course. A React learning experience that will give you all three of those important aspects to understanding code: what methods to use, why to use those methods, and how those methods work under the hood.

*****

I really believe that taking this course will be a valuable investment of your time.

I’m making the first couple sections free to preview. Even if you only end up doing this free content, you’ll walk away with a complete React application, and a lot of valuable lessons learned.

*****

Why take this course from me?

As mentioned before, I’m a full-stack software engineer working at Zendesk in San Francisco. I’ve also released 15 courses (a lot of them on React), with more than 170,000 students from 192 countries so far.

I’ve applied the best practices of software I’ve learned in my career, and the feedback from my thousands of reviews, to craft the best learning experience possible for you in this course. You’ll find a healthy balance of conceptual theory, and practical hands-on experience. You’ll gain skills right from the get-go in the first section. And you’ll build interesting and relevant projects throughout the course.

*****

In this course, you will:

Dive into React code right away. You will gain relevant experience as soon as the first section. Time is precious. And I want to make sure that you’ll never feel like you’re wasting it in this course. So in a matter of minutes, you will be writing React code in the first section, with a fully completed app by the end of it.
Understand how React fits in the big picture of web development. In the second section, you will take an important step back and examine how React fits in the big picture of web development. You’ll build a React project from scratch - discovering all the layers that are in between the supplies that supports the React app, and the browser which displays the React app.
Create relevant and compelling React apps. I’m betting you’ll find the apps both useful and interesting. Useful ones like the portfolio app will help you both learn React, and be valuable as a completed project for your software engineering and web developer profile. Fun ones like “Music Master”, will make coding lively, giving you apps you want to show off to your friends and family.

*****

In summary, you should take this course if you want to learn React in a time-efficient way, while building relevant and engaging projects.

Once again, the first couple sections are free to preview. And even if you only complete the free content, you’ll walk away with a full React app, and lots of valuable lessons learned.

See you there!

Who this course is for:

All levels welcome. However this won’t introduce coding from the ground up, so this might feel fast-paced for completely new students.
Anyone who wants a bootcamp to learn the essentials of React development.
Those looking for career opportunity in the exciting field of frontend web development.

Course content

12 sections • 125 lectures

Introduction 3 lectures

What You’ll Get From Taking this Course Preview 04:12

Overview of the course curriculum, and what you'll learn by taking it.

A 7m Overview of Web Development and React Preview 07:18

An overarching view of web development, and how React.js fits into that picture.

[IMPORTANT] Course Repo and Software Installations Preview 00:50

Provides important information including the course repository, and software installation links.

Welcome to React | First React Application 17 lectures

Section Overview | First React Application Preview 02:51

Overview of the first section on creating the first React application.

Set up the Portfolio App Preview 04:22

Set up the portfolio application - the first project of the course.

Run the React App and the React Project Structure Preview 09:56

Run the React application set up in the previous video, and go over the project structure.

ReactDOM, Elements, and JSX Preview 05:52

Understand essential aspects of React, including the ReactDOM, elements, and JSX.

A React Component Preview 06:15

Create your first React Component. Components are the building blocks of a React application. They can be used to build the whole user interface. And they can have dynamic functionality, that the user can interact with.

Classes - Overview Preview 03:25

An overview of JavaScript classes - a prerequisite for building React components using classes.

Classes, Inheritance, and a Closer Component Look Preview 10:54

An exploration of classes, JavaScript class-based inheritance, and an investigation of React.component.

State Preview 09:12

An exploration of React component state: the dynamic data contained within a React component.

SetState Preview 09:46

An introduction to the `setState` method: the way to update state in a React component.

A React Rule: Never Directly Modify State Preview 06:44

An explanation of one of the golden rules of react: never directly modify the state object in the component.

Class Properties and Initializers Preview 03:40

Refactor the class to use properties and initializers to follow the best practices of JavaScript.

Component 2: Projects Preview 12:25

Add a second component to Portfolio project for Projects.

Props and Project Component Preview 08:40

Explore React component props: the way data is passed from a parent React component to a child React component.

Challenge: Social Profiles Component Preview 04:28

Take on a challenge to build a new React component for Social Profiles.

Code: Social Profiles Component Preview 06:52

An implementation of the Social Profiles component - a follow up to the previous challenge to build this component.

Wrap up with Low-Hanging Styling Fruit Preview 11:59

Wrap up the Portfolio project by following up on some low hanging fruit to clean up the code.

Section Summary Preview 01:05

Breaking down React | React and Web Development 7 lectures

Section Overview Preview 03:39

React from Scratch Preview 10:26

Explore React more thoroughly from a truly ground 0 "from scratch" perspective.

Compiling, Bundling, and a Closer Look at JSX Preview 11:25

Understand compiling and bundling JavaScript code for React projects. Investigate JSX more deeply.

Refactor the Portfolio to use Parcel Preview 09:44

Refactor the Portfolio project to use the Parcel build tool to accomplish bundling.

The Necessity of Bundlers and Transpilers Review Preview 04:59

Understand the reasons why bundlers and transpilers for JavaScript and React applications are necessary.

The DOM and React’s Virtual DOM Preview 07:37

Go over the JavaScript raw DOM API for the browser. Understand how React creates its own virtual DOM as an internal representation of the raw DOM. Learn how the virtual DOM aids React applications to update their UI in a very efficient way.

Section Summary Preview 01:17

Continued Main React Concepts 13 lectures

Section Preview Preview 02:22

Lifecycle Methods and componentDidMount Preview 10:04

Understand lifecycle methods and their purpose, starting with componentDidMount.

ComponentWillUnmount Preview 06:09

Continue the exploration of lifecycle methods with componentWillUnmount.

[Optional] Title Fade Preview 08:58

Optionally fade the title of the Portfolio application.

Stateless Functional Components Preview 08:42

Learn an alternative way to define React components with the stateless functional style.

[Optional] HTTP Overview Preview 04:52

Optionally do a high-level overview of HTTP in order to understand how the protocol works. Learn how it's used for APIs and to request resources in the web.

Fetch and a Jokes Component Preview 11:31

Make a fetch call within a React application to an external API to power the data behind a new component around Jokes.

Challenge and Code: Ten More Jokes Preview 08:30

Take on a challenge to display ten jokes within the Jokes component.

Fetch Under the Hood: Promises Preview 12:00

Explore the fetch method under the hood, by diving into JavaScript promises.

React Router Preview 08:37

Add React Router to the project: a library which takes care of navigating the user to different components based on the url.

Header Component Preview 08:16

Add a reusable Header component to the project.

Higher Order Components Preview 08:21

Go over React higher-order components: components that take other React components as input, and output new React components with more logic, as a result.

Section Summary Preview 01:03

Core React Concepts Review 2 lectures

Core React Review Preview 06:57

Review the core concepts of React that were introduced and explained in the previous sections.

Core React - Glossary of Key Terms Preview 01:37

Core React Project: MusicMaster 2.0 10 lectures

Section and Project Preview Preview 03:22

Set up Music Master and Your Own React App Template Preview 09:07

Set up the music master application - the next project of the course!

Track User Input in the State Preview 07:19

Track the input of a user within fields in the state object of the React component.

Challenge and Code: Search an Artist’s Top Tracks Preview 10:33

Take on a challenge to search on artist's top tracks, and display them in the application.

Challenge and Code: Artist Component Preview 09:12

Take on a challenge to build an Artist component for the MusicMaster project.

Tracks Component Preview 13:14

Build a Tracks component for the MusicMaster project.

Search Component and Lifting State Up in Callback Props Preview 08:20

Create a Search component for the MusicMaster project, and learn about the approach of lifting state up through components in a React application.

Styling Finishing Touches Preview 10:40

Apply finishing touches around style to MusicMaster.

Include Music Master in Portfolio Preview 04:42

Add MusicMaster to the Portfolio project.

React Js And Redux Mastering Web Apps

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

What you'll learn

* Requirements

Description

Who this course is for:

Course content

What You’ll Get From Taking this Course Preview 04:12

A 7m Overview of Web Development and React Preview 07:18

[IMPORTANT] Course Repo and Software Installations Preview 00:50

Section Overview | First React Application Preview 02:51

Set up the Portfolio App Preview 04:22

Run the React App and the React Project Structure Preview 09:56

ReactDOM, Elements, and JSX Preview 05:52

A React Component Preview 06:15

Classes - Overview Preview 03:25

Classes, Inheritance, and a Closer Component Look Preview 10:54

State Preview 09:12

SetState Preview 09:46

A React Rule: Never Directly Modify State Preview 06:44

Class Properties and Initializers Preview 03:40

Component 2: Projects Preview 12:25

Props and Project Component Preview 08:40

Challenge: Social Profiles Component Preview 04:28

Code: Social Profiles Component Preview 06:52

Wrap up with Low-Hanging Styling Fruit Preview 11:59

Section Summary Preview 01:05

Section Overview Preview 03:39

React from Scratch Preview 10:26

Compiling, Bundling, and a Closer Look at JSX Preview 11:25

Refactor the Portfolio to use Parcel Preview 09:44

The Necessity of Bundlers and Transpilers Review Preview 04:59

The DOM and React’s Virtual DOM Preview 07:37

Section Summary Preview 01:17

Section Preview Preview 02:22

Lifecycle Methods and componentDidMount Preview 10:04

ComponentWillUnmount Preview 06:09

[Optional] Title Fade Preview 08:58

Stateless Functional Components Preview 08:42

[Optional] HTTP Overview Preview 04:52

Fetch and a Jokes Component Preview 11:31

Challenge and Code: Ten More Jokes Preview 08:30

Fetch Under the Hood: Promises Preview 12:00

React Router Preview 08:37

Header Component Preview 08:16

Higher Order Components Preview 08:21

Section Summary Preview 01:03

Core React Review Preview 06:57

Core React - Glossary of Key Terms Preview 01:37

Section and Project Preview Preview 03:22

Set up Music Master and Your Own React App Template Preview 09:07

Track User Input in the State Preview 07:19

Challenge and Code: Search an Artist’s Top Tracks Preview 10:33

Challenge and Code: Artist Component Preview 09:12

Tracks Component Preview 13:14

Search Component and Lifting State Up in Callback Props Preview 08:20

Styling Finishing Touches Preview 10:40

Include Music Master in Portfolio Preview 04:42

Section Summary Preview 00:40

Congratulations and Course Sequel Preview 01:47

Redux Overview [Redux Bootcamp Preview] Preview 06:14

Bonus Content! Preview 00:28

Deprecrated Content Preview 00:10

Wireframing CountdownChamp Preview 00:50

Building Your First Application Preview 02:25

Editing the Application Preview 02:09

Creating Your First Component Preview 03:58

Structuring the Application Preview 08:01

Introducing State Preview 02:33

Updating State Preview 03:27

Changing Data with the Input Field Preview 04:18

Creating a Clock Component Preview 03:54

Introducing Props Preview 01:58

Coding Break: Updating State Preview 00:41

Calculating Time Until Preview 06:08

Hooking with LifeCycle Methods Preview 04:16

Adding Helper Methods with Ternary Expressions Preview 02:16

Styling with React Bootstrap Preview 03:57

Summary and Challenges Preview 01:00

IMPORTANT: Before You Start MusicMaster Preview 00:35