Mammoth Interactive – Introduction to React and Redux. Code Web Apps in JavaScript.

Mammoth Interactive – Introduction to React and Redux. Code Web Apps in JavaScript.

Get Mammoth Interactive – Introduction to React and Redux. Code Web Apps in JavaScript. at Tenlibrary.com

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.

Course Curriculum

Introduction

• Join Our Forum
• Top 10 Things You Will Learn (5:19)
• Common Pitfalls and Mistakes (5:03)
• Quick Wins with React (5:36)
• Webpack Version Explanation (To Be Watched Before Starting) (2:26)

Chapter 1: Introduction to React and JSX

• 1.1 – Introduction to React and JSX Part 1 (23:48)
• 1.2 – Introduction to React and JSX Part 2 (19:40)
• 1.3 – Introduction to React and JSX Part 3 (2:34)
• 1.4 – Introduction to React and JSX Part 4 (5:27)
• Source Code 01: Setup

Chapter 2: Components

• 2.1 – Virtual DOM and Classes (15:43)
• 2.2 – ES6 Webpack Dev Server (11:19)
• 2.3 – React Components (7:28)
• 2.4 – React Components (Cont’d) (9:04)
• 2.5 – React Component Validators (14:24)
• Source Code 02: Components

Chapter 3: States

• 3.1 – React States Part 1 (12:02)
• 3.2 – React States Part 2 (4:39)
• 3.3 – React States Part 3 (6:01)
• 3.4 – React State Part 4 (13:13)
• 3.5 – React State Part 5 (5:06)
• 3.6 – React States “componentWillUnmount” (6:34)
• 3.7 – React States Webpack Hot Reloading (4:54)
• Source Code 03: States

Chapter 4: Event Handling

• 4.1 – React Event Handling Part 1 (12:57)
• 4.2 – React Event Handling Part 2 (4:26)
• 4.3 – React Event Handling Part 3 (3:57)
• 4.4 – React Event Handling Part 4 (12:59)
• 4.5 – React Event Handling Part 5 (6:54)
• Source Code 04: Event Handling

Chapter 5: React Routers

• 5.1 – React Props.children (6:01)
• 5.2 – React Router (12:27)
• 5.3 – React Router Direct URL (4:19)
• 5.4 – React Router Wildcard (2:29)
• 5.5 – React Router “Indexroute” (6:04)
• 5.6 – React Router Profile (4:10)
• 5.7 – React Router Nested Routes (6:31)
• 5.8 – React Router User Profile (7:36)
• 5.9 – React Router Redirects (7:33)
• 5.10 – React Redirects (1:36)
• 5.11 – React Router Profile (6:48)
• 5.12 – React Router Back Button (3:25)
• 5.13 – React Router Activeclassname (5:22)
• 5.14 – React Router Active Inline Styles (2:57)
• 5.15 – React Router Navlinks Components (10:14)
• Source Code 05: React Routers

Chapter 6: Refactoring

• 6.1 – React Slight Refactoring (5:25)
• 6.2 – React Slight Refactoring (Cont’d) (4:57)

Chapter 7: Products Components

• 7.1 – React Products Component Part 1 (9:31)
• 7.2 – React Products Component Part 2 (4:23)
• 7.3 – React Products Components Part 3 (7:29)
• 7.4 – React Products Component Part 4 (7:20)
• 7.5 – React Products Component Part 5 (6:39)
• 7.6 – React Products Component Part 6 (8:56)
• Source Code 06 & 07: Refactoring and Product Component

Chapter 8: CSS

• 8.1 – React Basic CSS Framework (5:12)
• 8.2 – React Basic CSS Framework (Cont’d) (7:51)
• 8.3 – React CSS Modules (10:48)
• 8.4 – React CSS Styling Part 1 (9:01)
• 8.5 – React CSS Styling Part 2 (8:26)
• 8.6 – React CSS Styling Part 3 (7:21)
• 8.7 – React CSS Styling Part 4 (6:59)
• 8.8 – React CSS Stylings Part 5 (3:33)
• 8.9 – React CSS Styling Part 6 (4:23)
• 8.10 – React CSS Extract to Separate File (8:21)
• 8.11 – React CSS Extract to Separate File (Cont’d) (1:41)
• Source Code 08: CSS

Chapter 9: Introduction to Redux

• 9.1 – Intro to Redux Part 1 (9:25)
• 9.2 – Intro to Redux Part 2 (7:57)
• 9.3 – Intro to Redux Part 3 (7:15)
• 9.4 – Intro to Redux Part 4 (4:22)
• 9.5 – Redux Store (8:32)
• 9.6 – Redux Store (Cont’d) (3:03)
• 9.7 – Redux Store Subscribe (4:52)
• 9.8 – Redux Store Subscribe (Cont’d) (3:09)
• 9.9 – Redux Combine Reducers (9:45)

Chapter 10: Adding Redux to React

• 10.1 – Adding Redux To React Part 1 (27:28)
• 10.2 – Adding Redux To React Part 2 (3:31)
• 10.3 – Adding Redux to React Part 3 (10:45)
• 10.4 – Adding Redux to React Part 4 (10:27)
• 10.5 – Delete Names (7:40)
• 10.6 – Babel and Spread Operators (4:46)
• Source Code 09 & 10: Introduction to Redux and Adding Redux to react

Chapter 11: Redux Action Creator and Product Refactor

• 11.1 – Action Creators (10:23)
• 11.2 – Profile Page (16:39)
• 11.3 – Dispatch and onEnter (7:33)
• 11.4 – Refactor into Separate Files (3:43)
• 11.5 – Refactor into Separate files (Cont’d) (1:24)
• 11.6 – Product Page (13:16)
• 11.7 – Product Profile Page (14:56)
• Source Code 11: Redux Action Creators and Product Refactor

Chapter 12: Redux State in createStore

• 12.1 – Initial State in createStore (6:34)
• 12.2 – Initial State in createStore (Cont’d) (3:57)
• 12.3 – Adding Generated Names with Faker (8:30)
• Source Code 12: Redux State in createStore

Chapter 13: Redux Middleware and Async Dispatching

• 13.1 – Fake Backend and Middleware (15:06)
• 13.2 – Thunk Middleware (16:14)
• 13.3 – Thunk Checking State (6:24)
• 13.4 – Get Profile Part 1 (8:53)
• 13.5 – Get Profile Part 2 (4:46)
• 13.6 – Get Profile Part 3 (4:18)
• 13.7 – Get Profile Part 4 (3:22)
• 13.8 – Get Names Refactor (5:47)
• 13.9 – Add Random Name (6:04)
• 13.10 – Add Random Name (Cont’d) (4:39)
• Source Code 13: Redux Middleware and Async Dispatching

Chapter 14: Redux Refactoring, Logging, and Error Handling

• 14.1 – Refactor Name Reducers (6:57)
• 14.2 – Using Actions (2:44)
• 14.3 – Error Handling Part 1 (10:11)
• 14.4 – Error Handling Part 2 (7:04)
• 14.5 – Error Handling Part 3 (8:59)
• Source Code 14: Redux Refactoring, Logging, and Error Handling

Chapter 15: Products Lists and Profiles

• 15.1 – Product List (13:24)
• 15.2 – Product List (Cont’d) (3:04)
• 15.3 – Product Profile (10:54)
• 15.4 – Product Profile (Cont’d) (4:05)
• 15.5 – Error Handling Refactor (4:57)
• 15.6 – Error Handling Refactor (Cont’d) (3:14)
• Source Code 15: Product Lists and Profiles

Chapter 16: Loading Spinner and Error Component

• 16.1 – Loading Spinner (9:16)
• 16.2 – Loading Spinner (Cont’d) (7:14)
• 16.3 – Error Component (11:24)
• Source Code 16: Loading Spinner and Error Component

Chapter 17: Adding User-Written Reviews

• 17.1 – Adding Reviews Part 1 (23:01)
• 17.2 – Adding Reviews Part 2 (11:32)
• 17.3 – Adding Reviews Part 3 (10:48)
• 17.4 – Adding User Reviews (19:46)
• 17.5 – Refining Review Containers Part 1 (3:53)
• 17.6 – Refining Review Containers Part 2 (3:24)
• 17.7 – Refining Review Containers Part 3 (6:00)
• Source Code 17: Adding User-Written Reviews

Chapter 18: Prototypes and Refactoring Error Handling

• 18.1 – Adding Prototypes (28:57)
• 18.2 – Adding Prototypes (Cont’d) (14:23)
• 18.3 – Action Types (6:39)
• 18.4 – Refactoring Error Handling (6:28)
• 18.5 – Refactoring Error Handling (Cont’d) (1:57)
• Source Code 18: Prototypes and Refactoring Error Handling

Chapter 19: Updating to Webpack 2 And Building Production Abundle

• 19.1 – Migrating to Webpack2 (7:14)
• 19.2 – Hot Reloading (5:43)
• 19.3 – Hot Reloading (Cont’d) (9:31)
• 19.4 – HTML Webpack Plugin (4:48)
• 19.5 – Simple Production Build (7:34)
• 19.6 – Dev Config File Update (3:49)
• Source Code 19: Updating to Webpack 2 And Building Production Abundle

Chapter 20: Styling the App

• 20.1 – Final Style Part 1 (7:13)
• 20.2 – Final Styling Part 2 (4:07)
• 20.3 – Final Styling Part 3 (10:53)
• 20.4 – Final Styling Part 4 (3:58)
• 20.5 – Final Styling Part 5 (2:40)
• 20.6 – Styling NavBar (2:33)
• 20.7 – Styling Product List Part 1 (6:06)
• 20.8 – Styling Product List Part 2 (5:18)
• 20.9 – Styling Product List Part 3 (1:34)
• 20.10 – Styling Product Profile Part 1 (6:15)
• 20.11 – Styling Product Profile (Cont’d) (5:06)
• 20.12 – Styling Review (5:03)
• 20.13 – Styling Review (Cont) (2:15)
• 20.14 – Styling Continued (1:58)
• 20.15 – Styling Namelist Part 1 (3:41)
• 20.16 – Styling Namelist Part 2 (3:34)
• 20.17 – Styling Namelist Part 3 (1:44)
• 20.18 – Styling Layout Footer (5:44)
• 20.19 – Styling Layout footer (Cont’d) (2:35)
• 20.20 – General Layout Styling (5:07)
• 20.21 – General Layout Styling (Cont’d) (1:07)
• 20.22 – Font Work and More Styling (17:11)
• Source Code 20: Styling the App

Chapter 21: Epilogue

• 21 – Final Thoughts (2:50)
• Get 155+ courses!

Get Mammoth Interactive – Introduction to React and Redux. Code Web Apps in JavaScript. at Tenlibrary.com