Introduction to React and Redux. Code Web Apps in JavaScript. (14 hours)
A beginner's guide to React and Redux for aspiring web app developers and entrepreneurs!
Created by John Bura
01
Skill level
All levels
02
Sections
22
03
Lectures
149
04
Instructor
John Bura
What's inside
This course includes.
✓
22
Sections
✓
149
Lectures
✓
149
Resources
✓
Certificate of completion
Included
✓
Mobile and desktop access
Included
✓
AI learning assistance
Included
Unlock all courses with our Subscription Bundle! Get unlimited access to entire course library, books and assets. Learn more and subscribe today!
Course content
Curriculum & lectures.
+ 0 - Introduction 4 lectures
React_Top_Ten
Locked
React_Common_Pitfalls
Locked
React_Quick_Win
Locked
Webpack Version Explanation
Locked
+ 1 - Introduction to React and JSX 4 lectures
1.1 React and JSX Intro Part 1
Locked
1.2 React and JSX Intro Part 2
Locked
1.3 React and JSX Intro Part 3
Locked
1.4 React and JSX Intro Part 4
Locked
+ 2 - Components 5 lectures
2.1 React Virtual Dom and Classes
Locked
2.3 React Components
Locked
2.4 React Components Part 2
Locked
2.2 React ES6 class webpack-dev-server
Locked
2.5 React Components Validators
Locked
+ 3 -States 7 lectures
3.1 React State Part 1
Locked
3.2 React States Part 2
Locked
3.3 React States Part 3
Locked
3.4 React State Part 4
Locked
3.5 React State Part 5
Locked
3.6 React State componentWillUnmount
Locked
3.7 React State Webpack Hot Reloading
Locked
+ 4 - Event Handling 5 lectures
4.1 React Event Handling Part 1
Locked
4.2 React Event Handling Part 2
Locked
4.3 React Event Handling Part 3
Locked
4.4 React Event Handling Part 4
Locked
4.5 React Event Handling Part 5
Locked
+ 5 - Routers 15 lectures
5.1 React Props.children
Locked
5.3 React Router Direct URL
Locked
5.4 React Router Wildcard
Locked
5.5 React Router Indexroute
Locked
5.6 React Router Profile
Locked
5.7 React Router Nested Routes
Locked
5.8 React Router User Profile
Locked
5.9 React Router Redirects
Locked
5.10 React Redirects
Locked
5.11 React Router Profile
Locked
5.12 React Router Back Button
Locked
5.13 React Router Activeclassname
Locked
5.14 React Router Active Inline Styles
Locked
5.15 React Router Navlinks Components
Locked
5.2 React Router
Locked
+ 6 - Refactoring 2 lectures
6.1 React Slight Refactoring
Locked
6.2 React Slight Refactoring (Cont'd)
Locked
+ 7 - Product Components 6 lectures
7.1 React Products Component Part 1
Locked
7.2 React Products Component Part 2
Locked
7.3 React Products Components Part 3 v2
Locked
7.4 React Products Component Part 4
Locked
7.5 React Products Component Part 5
Locked
7.6 React Products Component Part 6
Locked
+ 8 - CSS 11 lectures
8.1 React Basic CSS Framework
Locked
8.2 React Basic CSS Framework (Cont'd)
Locked
8.3 React CSS Modules
Locked
8.4 React CSS Styling Part 1
Locked
8.5 React CSS Styling Part 2
Locked
8.6 React CSS Styling Part 3
Locked
8.7 React CSS Styling Part 4
Locked
8.8 React CSS Stylings Part 5
Locked
8.9 React CSS Styling Part 6
Locked
8.10 React CSS Extract to Separate file
Locked
8.11 React CSS Extract to Separate file (Cont'd)
Locked
+ 9 - Redux 9 lectures
9.1 Intro to Redux Part 1
Locked
9.2 Intro to Redux Part 2
Locked
9.4 Intro to Redux Part 4
Locked
9.6 Redux Store (Cont'd)
Locked
9.7 Redux Store Subscribe
Locked
9.8 Redux Store Subscribe (Cont'd)
Locked
9.9 Redux Combine Reducers
Locked
9.5 Redux Store
Locked
9.3 Intro to Redux Part 3
Locked
+ 10 - Adding Redux to React 6 lectures
10.1 Adding Redux To React Part 1
Locked
10.2 Adding Redux To React Part 2
Locked
10.3 Adding Redux to React Part 3
Locked
10.4 adding Redux to React Part 4
Locked
10.5 Delete Names
Locked
10.6 Babel and Spread Operators
Locked
+ 11 - Profiles 7 lectures
11.1 Action Creators
Locked
11.2 Profile Page
Locked
11.3 Dispatch and onEnter
Locked
11.4 Refactor into Separate Files
Locked
11.5 Refactor into Separate files (Cont'd)
Locked
11.6 Product Page
Locked
11.7 Product Profile Page
Locked
+ 12 - createStore 3 lectures
12.2 Initial State in createStore (Cont'd)
Locked
12.1 Initial State in createStore
Locked
12.3 Adding Generated Names with Faker
Locked
+ 13 - Get Functions 10 lectures
13.1 Fake Backend and Middleware
Locked
13.2 Thunk Middleware
Locked
13.3 Thunk Checking State
Locked
13.4 Get Profile Part 1
Locked
13.6 Get Profile Part 3
Locked
13.8 Get Names Refactor
Locked
13.9 Add Random Name
Locked
13.10 Add Random Name (Cont'd)
Locked
13.7 Get Profile Part 4
Locked
13.5 Get Profile Part 2
Locked
+ 14 - Error Handling 5 lectures
14.1 Refactor Name Reducers
Locked
14.2 Using Actions
Locked
14.3 Error Handling Part 1
Locked
14.4 Error Handling Part 2
Locked
14.5 Error Handling Part 3
Locked
+ 15 - Product Lists and Profiles 6 lectures
15.2 Product List (Cont'd)
Locked
15.5 Error Handling Refactor
Locked
15.6 Error Handling Refactor (Cont'd)
Locked
15.4 Product Profile (Cont'd)
Locked
15.3 Product Profile
Locked
15.1 Product List
Locked
+ 16 - Loading Spinner 3 lectures
16.2 Loading Spinner (Cont'd)
Locked
16.1 Loading Spinner
Locked
16.3 Error Component
Locked
+ 17 - Reviews 7 lectures
17.1 Adding Reviews Part 1
Locked
17.2 adding Reviews Part 2
Locked
17.3 Adding Reviews Part 3
Locked
17.4 Adding User Reviews
Locked
17.5 Refining Review Containers Part 1
Locked
17.6 Refining Review Containers Part 2
Locked
17.7 Refining Review Containers Part 3
Locked
+ 18 - Prototypes and Error Handling 5 lectures
18.3 Action Types
Locked
18.4 Refactoring Error Handling
Locked
18.5 Refactoring Error Handling (Cont'd)
Locked
18.2 Adding Prototypes (Cont'd)
Locked
18.1 Adding Prototypes
Locked
+ 19 - Hot Reloading 6 lectures
19.1 Migrating to Webpack2
Locked
19.2 Hot Reloading
Locked
19.3 Hot Reloading (Cont'd)
Locked
19.4 HTML Webpack Plugin
Locked
19.5 Simple Production Build
Locked
19.6 Dev Config File Update
Locked
+ 20 - Final Touches 22 lectures
20.1 Final Style Part 1
Locked
20.2 Final Styling Part 2
Locked
20.3 Final Styling Part 3
Locked
20.4 Final Styling Part 4
Locked
20.5 Final Styling Part 5
Locked
20.6 Styling NavBar
Locked
20.7 Styling Product List Part 1
Locked
20.8 Styling Product List Part 2
Locked
20.9 Styling Product List Part 3
Locked
20.10 Styling Product Profile Part 1
Locked
20.11 Styling Product Profile (Cont'd)
Locked
20.12 Styling Review
Locked
20.13 Styling Review (Cont'd)
Locked
20.14 Styling Continued
Locked
20.15 Styling Namelist Part 1
Locked
20.16 Styling Namelist Part 2
Locked
20.17 Styling Namelist Part 3
Locked
20.18 Styling Layout Footer
Locked
20.19 Styling Layout footer (Cont'd)
Locked
20.20 General Layout Styling
Locked
20.21 General Layout Styling (Cont'd)
Locked
20.22 Font Work and More Styling
Locked
+ 21 - Epilogue 1 lecture
21 Final Thoughts
Locked
Description
About this course.
Do you want to learn to build beautiful, well-functioning web apps? Join web developer Chris Veillette in this course for beginners to start building web apps today.
Why React?
React is an efficient and flexible JavaScript library for building user interfaces. Many popular websites including Instagram, Facebook, Netflix, and Imgur use React.
What Will I Learn?
- How to lay out a web app in a logical way
- JSX, a pre-processor that adds XML syntax to JavaScript
- The foundations of building a single-page app using React Router
- How to use Web Pack, a bundler for code
- How to transition from webpack 1.0 to webpack 2.0
- How to write modular CSS. Instead of having one global CSS file, you can break it down into components. This makes your CSS simple and declarative.
- How to use Redux, a predictable state container for JavaScript apps
- How to refactor code (alter code to make it simpler and more efficient)
- How to fix bugs and handle errors
- How to code in ES6 and JavaScript
Who is the target audience?
- Developers who want to learn about React and Redux.
- Coders who want to learn to build web apps.
- Coders who want to learn JavaScript.
Requirements
- Modern web browser
- Basic HTML/CSS knowledge
- This course was recorded on a Mac computer.
You can build your own web apps! This course is full of practical examples. We teach you theory while also building real projects that you can put in your web development portfolio. Enroll today to join the Mammoth community.
Level: Beginner, Length: 18.5 hours. The source code for the projects is included in this course.
Instructors
Taught by people who ship.
John Bura
Founder and CEO of Mammoth Club and Course Pro, the #1 AI-powered Learning Management System for course and content development, training and evaluation.
Ready to start building?
A beginner's guide to React and Redux for aspiring web app developers and entrepreneurs!