Introduction To React And Redux: Code Web Apps In JavaScript
This course is designed for those interested to learn how to code web apps using React and Redux. Read more.
Course Skill Level
Beginner
Time Estimate
18h 31m
John Bura has been programming games since 1997 and teaching since 2002. John is the owner of the game development studio Mammoth Interactive. This company produces XBOX 360, iPhone, iPad, Android, HTML 5, ad-games and more. Mammoth Interactive recently sold a game to Nickelodeon! John has been contracted by many different companies to provide game design, audio, programming, level design and project management. To this day, John has 40 commercial games that he has contributed to. Sev
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- Developers who want to learn about React and Redux
- Coders who want to learn to build web apps
- Coders who want to learn JavaScript
What you’ll 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 & JavaScript
Requirements:
- Modern web browser
- Basic HTML/CSS knowledge
- This course was recorded on a Mac computer
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.
Our Promise to You
By the end of this course, you will have learned how to code web apps using React and Redux.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about coding web apps using React and Redux.
Course Curriculum
| Section 1 - Introduction | |||
| Top 10 Things You Will Learn | 00:00:00 | ||
| Common Pitfalls And Mistakes | 00:00:00 | ||
| Quick Wins With React | 00:00:00 | ||
| Webpack Version Explanation | 00:00:00 | ||
| Downloadable Course Files - Source Codes | 00:00:00 | ||
| Section 2 - Introduction To React And JSX | |||
| Introduction To React And JSX Part 1 | 00:00:00 | ||
| Introduction To React And JSX Part 2 | 00:00:00 | ||
| Introduction To React And JSX Part 3 | 00:00:00 | ||
| Introduction To React And JSX Part 4 | 00:00:00 | ||
| Section 3 - Components | |||
| Virtual DOM And Classes | 00:00:00 | ||
| ES6 Webpack Dev Server | 00:00:00 | ||
| React Components | 00:00:00 | ||
| React Components (Cont'd) | 00:00:00 | ||
| React Component Validators | 00:00:00 | ||
| Section 4 - States | |||
| React States Part 1 | 00:00:00 | ||
| React States Part 2 | 00:00:00 | ||
| React States Part 3 | 00:00:00 | ||
| React State Part 4 | 00:00:00 | ||
| React States Part 5 | 00:00:00 | ||
| React States "componentWillUnmount" | 00:00:00 | ||
| React States Webpack Hot Reloading | 00:00:00 | ||
| Section 5 - Event Handling | |||
| React Event Handling Part 1 | 00:00:00 | ||
| React Event Handling Part 2 | 00:00:00 | ||
| React Event Handling Part 3 | 00:00:00 | ||
| React Event Handling Part 4 | 00:00:00 | ||
| React Event Handling Part 5 | 00:00:00 | ||
| Section 6 - React Routers | |||
| React Props.Children | 00:00:00 | ||
| React Router | 00:00:00 | ||
| React Router Direct URL | 00:00:00 | ||
| React Router Wildcard | 00:00:00 | ||
| React Router "Indexroute" | 00:00:00 | ||
| React Router Profile | 00:00:00 | ||
| React Router Nested Routes | 00:00:00 | ||
| React Router User Profile | 00:00:00 | ||
| React Router Redirects | 00:00:00 | ||
| React Redirects | 00:00:00 | ||
| React Router Profile | 00:00:00 | ||
| React Router Back Button | 00:00:00 | ||
| React Router Activeclassname | 00:00:00 | ||
| React Router Active Inline Styles | 00:00:00 | ||
| React Router Navlinks Components | 00:00:00 | ||
| Section 7 - Refactoring | |||
| React Slight Refactoring | 00:00:00 | ||
| React Slight Refactoring (Cont'd) | 00:00:00 | ||
| Section 8 - Products Components | |||
| React Products Component Part 1 | 00:00:00 | ||
| React Products Component Part 2 | 00:00:00 | ||
| React Products Component Part 3 | 00:00:00 | ||
| React Products Component Part 4 | 00:00:00 | ||
| React Products Component Part 5 | 00:00:00 | ||
| React Products Component Part 6 | 00:00:00 | ||
| Section 9 - CSS | |||
| React Basic CSS Framework | 00:00:00 | ||
| React Basic CSS Framework (Cont'd) | 00:00:00 | ||
| React CSS Modules | 00:00:00 | ||
| React CSS Styling Part 1 | 00:00:00 | ||
| React CSS Styling Part 2 | 00:00:00 | ||
| React CSS Styling Part 3 | 00:00:00 | ||
| React CSS Styling Part 4 | 00:00:00 | ||
| React CSS Styling Part 5 | 00:00:00 | ||
| React CSS Styling Part 6 | 00:00:00 | ||
| React CSS Extract To Separate File | 00:00:00 | ||
| React CSS Extract To Separate File (Cont'd) | 00:00:00 | ||
| Section 10 - Introduction To Redux | |||
| Intro To Redux Part 1 | 00:00:00 | ||
| Intro To Redux Part 2 | 00:00:00 | ||
| Intro To Redux Part 3 | 00:00:00 | ||
| Intro To Redux Part 4 | 00:00:00 | ||
| Redux Store | 00:00:00 | ||
| Redux Store (Cont'd) | 00:00:00 | ||
| Redux Store Subscribe | 00:00:00 | ||
| Redux Store Subscribe (Cont'd) | 00:00:00 | ||
| Redux Combine Reducers | 00:00:00 | ||
| Section 11 - Adding Redux To React | |||
| Adding Redux To React Part 1 | 00:00:00 | ||
| Adding Redux To React Part 2 | 00:00:00 | ||
| Adding Redux To React Part 3 | 00:00:00 | ||
| Adding Redux To React Part 4 | 00:00:00 | ||
| Delete Names | 00:00:00 | ||
| Babel And Spread Operators | 00:00:00 | ||
| Section 12 - Redux Action Creator And Product Refactor | |||
| Action Creators | 00:00:00 | ||
| Profile Page | 00:00:00 | ||
| Dispatch And OnEnter | 00:00:00 | ||
| Refactor Into Separate Files | 00:00:00 | ||
| Refactor Into Separate Files (Cont'd) | 00:00:00 | ||
| Product Page | 00:00:00 | ||
| Product Profile Page | 00:00:00 | ||
| Section 13 - Redux State In CreateStore | |||
| Initial State In CreateStore | 00:00:00 | ||
| Initial State In CreateStore (Cont'd) | 00:00:00 | ||
| Adding Generated Names With Faker | 00:00:00 | ||
| Section 14 - Redux Middleware And Async Dispatching | |||
| Fake Backend And Middleware | 00:00:00 | ||
| Thunk Middleware | 00:00:00 | ||
| Thunk Checking State | 00:00:00 | ||
| Get Profile Part 1 | 00:00:00 | ||
| Get Profile Part 2 | 00:00:00 | ||
| Get Profile Part 3 | 00:00:00 | ||
| Get Profile Part 4 | 00:00:00 | ||
| Get Names / Refactor | 00:00:00 | ||
| Add Random Name | 00:00:00 | ||
| Add Random Name (Cont'd) | 00:00:00 | ||
| Section 15 - Redux Refactoring, Logging And Error Handling | |||
| Refactor Name Reducers | 00:00:00 | ||
| Using Actions | 00:00:00 | ||
| Error Handling Part 1 | 00:00:00 | ||
| Error Handling Part 2 | 00:00:00 | ||
| Error Handling Part 3 | 00:00:00 | ||
| Section 16 - Products Lists And Profiles | |||
| Product List | 00:00:00 | ||
| Product List (Cont'd) | 00:00:00 | ||
| Product Profile | 00:00:00 | ||
| Product Profile (Cont'd) | 00:00:00 | ||
| Error Handling Refactor | 00:00:00 | ||
| Error Handling Refactor (Cont'd) | 00:00:00 | ||
| Section 17 - Loading Spinner And Error Component | |||
| Loading Spinner | 00:00:00 | ||
| Loading Spinner (Cont'd) | 00:00:00 | ||
| Error Component | 00:00:00 | ||
| Section 18 - Adding User Written Reviews | |||
| Adding Reviews Part 1 | 00:00:00 | ||
| Adding Reviews Part 2 | 00:00:00 | ||
| Adding Reviews Part 3 | 00:00:00 | ||
| Adding User Reviews | 00:00:00 | ||
| Refining Review Containers Part 1 | 00:00:00 | ||
| Refining Review Containers Part 2 | 00:00:00 | ||
| Refining Review Containers Part 3 | 00:00:00 | ||
| Section 19 - Prototypes And Refactoring Error Handling | |||
| Adding Prototypes | 00:00:00 | ||
| Adding Prototypes (Cont'd) | 00:00:00 | ||
| Action Types | 00:00:00 | ||
| Refactoring Error Handling | 00:00:00 | ||
| Refactoring Error Handling (Cont'd) | 00:00:00 | ||
| Section 20 - Updating To Webpack 2 And Building Production Abundle | |||
| Migrating To Webpack2 | 00:00:00 | ||
| Hot Reloading | 00:00:00 | ||
| Hot Reloading (Cont'd) | 00:00:00 | ||
| HTML Webpack Plugin | 00:00:00 | ||
| Simple Production Build | 00:00:00 | ||
| Dev Config File Update | 00:00:00 | ||
| Section 21 - Styling The App | |||
| Final Style Part 1 | 00:00:00 | ||
| Final Style Part 2 | 00:00:00 | ||
| Final Style Part 3 | 00:00:00 | ||
| Final Style Part 4 | 00:00:00 | ||
| Final Style Part 5 | 00:00:00 | ||
| Styling NavBar | 00:00:00 | ||
| Styling Product List Part 1 | 00:00:00 | ||
| Styling Product List Part 2 | 00:00:00 | ||
| Styling Product List Part 3 | 00:00:00 | ||
| Styling Product Profile | 00:00:00 | ||
| Styling Product Profile (Cont'd) | 00:00:00 | ||
| Styling Review | 00:00:00 | ||
| Styling Review (Cont) | 00:00:00 | ||
| Styling Continued | 00:00:00 | ||
| Styling Namelist Part 1 | 00:00:00 | ||
| Styling Namelist Part 2 | 00:00:00 | ||
| Styling Namelist Part 3 | 00:00:00 | ||
| Styling Layout Footer | 00:00:00 | ||
| Styling Layout Footer (Cont'd) | 00:00:00 | ||
| General Layout Styling | 00:00:00 | ||
| General Layout Styling (Cont'd) | 00:00:00 | ||
| Font Work And More Styling | 00:00:00 | ||
| Section 22 - Epilogue | |||
| Final Thoughts | 00:00:00 | ||
About This Course
Who this course is for:
- Developers who want to learn about React and Redux
- Coders who want to learn to build web apps
- Coders who want to learn JavaScript
What you’ll 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 & JavaScript
Requirements:
- Modern web browser
- Basic HTML/CSS knowledge
- This course was recorded on a Mac computer
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.
Our Promise to You
By the end of this course, you will have learned how to code web apps using React and Redux.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about coding web apps using React and Redux.
Course Curriculum
| Section 1 - Introduction | |||
| Top 10 Things You Will Learn | 00:00:00 | ||
| Common Pitfalls And Mistakes | 00:00:00 | ||
| Quick Wins With React | 00:00:00 | ||
| Webpack Version Explanation | 00:00:00 | ||
| Downloadable Course Files - Source Codes | 00:00:00 | ||
| Section 2 - Introduction To React And JSX | |||
| Introduction To React And JSX Part 1 | 00:00:00 | ||
| Introduction To React And JSX Part 2 | 00:00:00 | ||
| Introduction To React And JSX Part 3 | 00:00:00 | ||
| Introduction To React And JSX Part 4 | 00:00:00 | ||
| Section 3 - Components | |||
| Virtual DOM And Classes | 00:00:00 | ||
| ES6 Webpack Dev Server | 00:00:00 | ||
| React Components | 00:00:00 | ||
| React Components (Cont'd) | 00:00:00 | ||
| React Component Validators | 00:00:00 | ||
| Section 4 - States | |||
| React States Part 1 | 00:00:00 | ||
| React States Part 2 | 00:00:00 | ||
| React States Part 3 | 00:00:00 | ||
| React State Part 4 | 00:00:00 | ||
| React States Part 5 | 00:00:00 | ||
| React States "componentWillUnmount" | 00:00:00 | ||
| React States Webpack Hot Reloading | 00:00:00 | ||
| Section 5 - Event Handling | |||
| React Event Handling Part 1 | 00:00:00 | ||
| React Event Handling Part 2 | 00:00:00 | ||
| React Event Handling Part 3 | 00:00:00 | ||
| React Event Handling Part 4 | 00:00:00 | ||
| React Event Handling Part 5 | 00:00:00 | ||
| Section 6 - React Routers | |||
| React Props.Children | 00:00:00 | ||
| React Router | 00:00:00 | ||
| React Router Direct URL | 00:00:00 | ||
| React Router Wildcard | 00:00:00 | ||
| React Router "Indexroute" | 00:00:00 | ||
| React Router Profile | 00:00:00 | ||
| React Router Nested Routes | 00:00:00 | ||
| React Router User Profile | 00:00:00 | ||
| React Router Redirects | 00:00:00 | ||
| React Redirects | 00:00:00 | ||
| React Router Profile | 00:00:00 | ||
| React Router Back Button | 00:00:00 | ||
| React Router Activeclassname | 00:00:00 | ||
| React Router Active Inline Styles | 00:00:00 | ||
| React Router Navlinks Components | 00:00:00 | ||
| Section 7 - Refactoring | |||
| React Slight Refactoring | 00:00:00 | ||
| React Slight Refactoring (Cont'd) | 00:00:00 | ||
| Section 8 - Products Components | |||
| React Products Component Part 1 | 00:00:00 | ||
| React Products Component Part 2 | 00:00:00 | ||
| React Products Component Part 3 | 00:00:00 | ||
| React Products Component Part 4 | 00:00:00 | ||
| React Products Component Part 5 | 00:00:00 | ||
| React Products Component Part 6 | 00:00:00 | ||
| Section 9 - CSS | |||
| React Basic CSS Framework | 00:00:00 | ||
| React Basic CSS Framework (Cont'd) | 00:00:00 | ||
| React CSS Modules | 00:00:00 | ||
| React CSS Styling Part 1 | 00:00:00 | ||
| React CSS Styling Part 2 | 00:00:00 | ||
| React CSS Styling Part 3 | 00:00:00 | ||
| React CSS Styling Part 4 | 00:00:00 | ||
| React CSS Styling Part 5 | 00:00:00 | ||
| React CSS Styling Part 6 | 00:00:00 | ||
| React CSS Extract To Separate File | 00:00:00 | ||
| React CSS Extract To Separate File (Cont'd) | 00:00:00 | ||
| Section 10 - Introduction To Redux | |||
| Intro To Redux Part 1 | 00:00:00 | ||
| Intro To Redux Part 2 | 00:00:00 | ||
| Intro To Redux Part 3 | 00:00:00 | ||
| Intro To Redux Part 4 | 00:00:00 | ||
| Redux Store | 00:00:00 | ||
| Redux Store (Cont'd) | 00:00:00 | ||
| Redux Store Subscribe | 00:00:00 | ||
| Redux Store Subscribe (Cont'd) | 00:00:00 | ||
| Redux Combine Reducers | 00:00:00 | ||
| Section 11 - Adding Redux To React | |||
| Adding Redux To React Part 1 | 00:00:00 | ||
| Adding Redux To React Part 2 | 00:00:00 | ||
| Adding Redux To React Part 3 | 00:00:00 | ||
| Adding Redux To React Part 4 | 00:00:00 | ||
| Delete Names | 00:00:00 | ||
| Babel And Spread Operators | 00:00:00 | ||
| Section 12 - Redux Action Creator And Product Refactor | |||
| Action Creators | 00:00:00 | ||
| Profile Page | 00:00:00 | ||
| Dispatch And OnEnter | 00:00:00 | ||
| Refactor Into Separate Files | 00:00:00 | ||
| Refactor Into Separate Files (Cont'd) | 00:00:00 | ||
| Product Page | 00:00:00 | ||
| Product Profile Page | 00:00:00 | ||
| Section 13 - Redux State In CreateStore | |||
| Initial State In CreateStore | 00:00:00 | ||
| Initial State In CreateStore (Cont'd) | 00:00:00 | ||
| Adding Generated Names With Faker | 00:00:00 | ||
| Section 14 - Redux Middleware And Async Dispatching | |||
| Fake Backend And Middleware | 00:00:00 | ||
| Thunk Middleware | 00:00:00 | ||
| Thunk Checking State | 00:00:00 | ||
| Get Profile Part 1 | 00:00:00 | ||
| Get Profile Part 2 | 00:00:00 | ||
| Get Profile Part 3 | 00:00:00 | ||
| Get Profile Part 4 | 00:00:00 | ||
| Get Names / Refactor | 00:00:00 | ||
| Add Random Name | 00:00:00 | ||
| Add Random Name (Cont'd) | 00:00:00 | ||
| Section 15 - Redux Refactoring, Logging And Error Handling | |||
| Refactor Name Reducers | 00:00:00 | ||
| Using Actions | 00:00:00 | ||
| Error Handling Part 1 | 00:00:00 | ||
| Error Handling Part 2 | 00:00:00 | ||
| Error Handling Part 3 | 00:00:00 | ||
| Section 16 - Products Lists And Profiles | |||
| Product List | 00:00:00 | ||
| Product List (Cont'd) | 00:00:00 | ||
| Product Profile | 00:00:00 | ||
| Product Profile (Cont'd) | 00:00:00 | ||
| Error Handling Refactor | 00:00:00 | ||
| Error Handling Refactor (Cont'd) | 00:00:00 | ||
| Section 17 - Loading Spinner And Error Component | |||
| Loading Spinner | 00:00:00 | ||
| Loading Spinner (Cont'd) | 00:00:00 | ||
| Error Component | 00:00:00 | ||
| Section 18 - Adding User Written Reviews | |||
| Adding Reviews Part 1 | 00:00:00 | ||
| Adding Reviews Part 2 | 00:00:00 | ||
| Adding Reviews Part 3 | 00:00:00 | ||
| Adding User Reviews | 00:00:00 | ||
| Refining Review Containers Part 1 | 00:00:00 | ||
| Refining Review Containers Part 2 | 00:00:00 | ||
| Refining Review Containers Part 3 | 00:00:00 | ||
| Section 19 - Prototypes And Refactoring Error Handling | |||
| Adding Prototypes | 00:00:00 | ||
| Adding Prototypes (Cont'd) | 00:00:00 | ||
| Action Types | 00:00:00 | ||
| Refactoring Error Handling | 00:00:00 | ||
| Refactoring Error Handling (Cont'd) | 00:00:00 | ||
| Section 20 - Updating To Webpack 2 And Building Production Abundle | |||
| Migrating To Webpack2 | 00:00:00 | ||
| Hot Reloading | 00:00:00 | ||
| Hot Reloading (Cont'd) | 00:00:00 | ||
| HTML Webpack Plugin | 00:00:00 | ||
| Simple Production Build | 00:00:00 | ||
| Dev Config File Update | 00:00:00 | ||
| Section 21 - Styling The App | |||
| Final Style Part 1 | 00:00:00 | ||
| Final Style Part 2 | 00:00:00 | ||
| Final Style Part 3 | 00:00:00 | ||
| Final Style Part 4 | 00:00:00 | ||
| Final Style Part 5 | 00:00:00 | ||
| Styling NavBar | 00:00:00 | ||
| Styling Product List Part 1 | 00:00:00 | ||
| Styling Product List Part 2 | 00:00:00 | ||
| Styling Product List Part 3 | 00:00:00 | ||
| Styling Product Profile | 00:00:00 | ||
| Styling Product Profile (Cont'd) | 00:00:00 | ||
| Styling Review | 00:00:00 | ||
| Styling Review (Cont) | 00:00:00 | ||
| Styling Continued | 00:00:00 | ||
| Styling Namelist Part 1 | 00:00:00 | ||
| Styling Namelist Part 2 | 00:00:00 | ||
| Styling Namelist Part 3 | 00:00:00 | ||
| Styling Layout Footer | 00:00:00 | ||
| Styling Layout Footer (Cont'd) | 00:00:00 | ||
| General Layout Styling | 00:00:00 | ||
| General Layout Styling (Cont'd) | 00:00:00 | ||
| Font Work And More Styling | 00:00:00 | ||
| Section 22 - Epilogue | |||
| Final Thoughts | 00:00:00 | ||
Related Courses
MATLAB/Simulink - Simulink Course For Electrical Engineering (Part 2)
BeginnerEngr Ahmed Mahdy$199.00
MATLAB/Simulink - Simulink Course For Electrical Engineering (Part 1)
BeginnerEngr Ahmed Mahdy$199.00
MATLAB/Simulink - Simulink Course For Electrical Engineering (Part 2)
Beginner
Engr Ahmed Mahdy
$199.00
MATLAB/Simulink - Simulink Course For Electrical Engineering (Part 1)
Beginner
Engr Ahmed Mahdy
$199.00
Are you interested in higher education?
© 2025 SKILLSUCCESS
All Rights Reserved