English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 13 Hours | 5.73 GB
Learn React.js and Redux the right way. Dive into the React engine, create 5 apps, and become a React web developer.
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.
- Learn Redux the right way, breaking it down. Redux is a must with React. But it has a much higher learning curve, since the concepts are more complex. In this course, every Redux method is going to be taken one step at a time. You’ll dig deeper into how the methods work under the hood. You’ll learn more than what methods to use. You’ll learn how those methods work individually and together. And you’ll learn why methods are written in a certain way, and when they should be applied. That way, you have the deep understanding that will empower you to write React and Redux apps long into the future.
- Build more awesome apps! As you learn redux in the later sections, the projects will remain interesting and relevant. You’ll make a mini React game, using an external API. And you’ll create a React app that has multi-user functionality! Supporting multiple users is a staple of so many web applications – but can be surprisingly hard to pull off. But you’ll find the solution in this course both elegant and extendable.
- Explore backend web development. I think it’s important to learn essential backend skills as a React and web application developer. With React app, you’re often using APIs to supply the content of your application. So having the ability to create your own backends, and APIs, will give you the capability to make React apps of any kind, for your own unique use cases, long after you complete this course.
- Deploy your React applications. The projects you create in this course will be deployed to production. That way, you can share your the products of your work with anyone you like!
In summary, you should take this course if you want to learn React and Redux in a time-efficient way, while building relevant and engaging projects.
What you’ll learn
- How to bootstrap React applications in under a minute with create-react-app.
- How to build React projects from scratch without create-react-app.
- Where React fits in the big picture of web development.
- Transpiling and bundling React applications.
- Modern best practices of React and Redux development.
- How to use APIs to create unique and interesting applications.
- Redux at a deeper level. How each layer of a Redux application really fits together.
- The reasons why bugs appear, the proper fixes for those bugs, and why certain solutions are more optimal than other ones.
- Deployment of React applications.
- Backend essentials too, and how to create backend APIs.
Table of Contents
Introduction
1 What You’ll Get From Taking this Course
2 A 7m Overview of Web Development and React
3 [IMPORTANT] Course Repo and Software Installations
Welcome to React | First React Application
4 Section Overview | First React Application
5 Set up the Portfolio App
6 Run the React App and the React Project Structure
7 ReactDOM, Elements, and JSX
8 A React Component
9 Classes – Overview
10 Classes, Inheritance, and a Closer Component Look
11 State
12 SetState
13 A React Rule: Never Directly Modify State
14 Class Properties and Initializers
15 Component 2: Projects
16 Props and Project Component
17 Challenge: Social Profiles Component
18 Code: Social Profiles Component
19 Wrap up with Low-Hanging Styling Fruit
20 Section Summary
Breaking down React | React and Web Development
21 Section Overview
22 React from Scratch
23 Compiling, Bundling, and a Closer Look at JSX
24 Refactor the Portfolio to use Parcel
25 The Necessity of Bundlers and Transpilers Review
26 The DOM and React’s Virtual DOM
27 Section Summary
Continued Main React Concepts
28 Section Preview
29 Lifecycle Methods and componentDidMount
30 ComponentWillUnmount
31 [Optional] Title Fade
32 Stateless Functional Components
33 [Optional] HTTP Overview
34 Fetch and a Jokes Component
35 Challenge and Code: Ten More Jokes
36 Fetch Under the Hood: Promises
37 React Router
38 Header Component
39 Higher Order Components
40 Section Summary
Core React Project: MusicMaster 2.0
41 Section and Project Preview
42 Set up Music Master and Your Own React App Template
43 Track User Input in the State
44 Challenge and Code: Search an Artist’s Top Tracks
45 Challenge and Code: Artist Component
46 Tracks Component
47 Search Component and Lifting State Up in Callback Props
48 Styling Finishing Touches
49 Include Music Master in Portfolio
50 Section Summary
Core React Concepts Review
51 Core React Review
52 Core React – Glossary of Key Terms
Redux and more Advanced React
53 Section and Project Preview
54 Redux Overview
55 Set Up Evens or Odds and the Redux Store
56 Reducers
57 Actions
58 Action Creators
59 Root Reducer Update and the Spread Operator
60 Split the Redux Layers
61 Connect React Components to Redux
62 Redux-based UI
63 Map Dispatch to Props
64 Challenge and Code: Interactive Instructions
65 Fetch Deck of Cards
66 CORS and Same Origin Policy
67 Async Actions
68 Redux Middleware
69 Handle Fetch Cases
70 Split up and Combine Reducers
71 DrawCard Component
72 Challenge and Code: Draw Card Redux Flow
73 Challenge and Code: Card Component
74 Challenge and Code: Guess Redux Logic and Component
75 Track Correct Guesses
76 Correct Guess Record and Local Storage
77 Include Evens or Odds in Portfolio
78 Section Summary
Redux Project: Reaction
79 Section and Project Preview
80 Publish/Subscribe with Redux
81 Set Up the Reaction App
82 PubNub Exploration
83 PubSub Class and Redux Connection
84 Messages Redux Flow
85 Publish Message Component
86 React Context
87 Redux Devtools
88 Challenge and Code: Message Board Component
89 Challenge and Code: Username in Redux
90 Username in Messages
91 CreateReaction Component
92 Reactions Redux Flow
93 Publish Reaction
94 MessageReactions Component
95 Include Reaction in Portfolio
96 Section Summary
Redux Review
97 Redux Review
98 Redux – Glossary of Key Terms
Create Backend APIs for React Apps
99 Section Overview
100 Set Up News App and Express Server
101 GET Stories and Nodemon
102 Express Middleware and CORS
103 Request an API within an API
104 Error Handler
105 Top Story Items
106 Spotlight: Deck of Cards and Spotify Wrapper APIs
107 Set up News React Client and Serve a React App with Express
108 Challenge and Code: Fetch and Display Stories
109 Section Summary
React App Deployment
110 Section Overview
111 Github Walkthrough
112 Heroku Deployment
113 Section Summary
Conclusion
114 Congratulations and Final Remarks
115 Bonus Content!
Resolve the captcha to access the links!