React and Redux Masterclass

Name: React and Redux Masterclass
Rating: 4.5 (451 reviews)

Master React JS components with Redux actions in Flux. Yarn, React Redux, Redux Thunk Reactjs, React.js test renderer

Created byMateusz Grzesiukiewicz

Last updated 10/2017

English

What you'll learn

Create reusable stateless and easily testable components
Create pure & easily testable action handlers (reducers)
Connect stateless views with stateless reducers through React containers
Refactor applications to be more testable and reusable (decoupled)
Understand React Flux architecture and how to connect all the bits

Course content

6 sections • 33 lectures • 16h 8m total length

Application introduction2:03
Project setup1:19
Master the project setup for a React and Redux masterclass, outlining essential steps to initialize and organize code for effective app development.
Deep dive into source code to refactor8:00

Splitting into separate files9:18
Refactoring to function syntax - Button & Digits components4:11
Refactor the Button and Digits components from class instances to stateless function components using es6 arrow functions, props, and simplified handlers, preserving click behavior and app functionality.
Refactoring Operators & ControlPanel3:43
Dealing with stateful component - Display3:15
Making Display stateless2:49

Installing redux and adding redux store4:12
Adding redux actions and action handlers8:55
Important change to src/index.js0:13
I somehow missed this, but if you follow along, please also make a change to src/index.js file as well!

The required change you will find in:

https://github.com/Ajdija/Learning-React-Redux-decoupling-with-stateless-components/commit/ee88b3039b812d28b437ef97989dc5664afd9d06#diff-1fdf421c05c1140f6d71444ea2b27638R6

Thank you and sorry for inconvenience :)
Remove event emitter dependency6:57
History view refactor8:25
Refactor the history view to a function component, add a history reducer, and implement update expression and toggle history actions to fix operators and restore history in React and Redux.
Decoupling history from store2:38

Digit container and digit presentational component7:47
Redux Thunk to fix history issue7:16
Refactoring History to presentational component4:54
Refactor the history component into a presentational component and decouple it from the store, introducing a history container and dispatching update expression and toggle history actions.
Container Higher Order Components (HOC) to access dispatch6:16
Refactor the calculator by turning operators into a presentational component and creating an operators container, a higher-order component with redux thunk, dispatching update expression and handling operator clicks and clear/backspace.
Polishing components props to be more reusable4:07
Refactor the calculator app to be more reusable by turning fixed class names into props. Configure button, control panel, and history with props, and use char code 8592 for arrows.
Delegate passing store to ReactRedux provider2:17
Refactor the calculator component to use the provider instead of passing the store props, making the store available via react-redux Provider. Define context and prop types, and prepare for tests.

Requirements

Basic Javascript knowledge (with ES6 syntax)
Web development basics like HTML structure, DOM tree
I will assume you know what React is, and preferably created at least one application
I will also assume you know Components, JSX, ES6 syntax and understand the data flow in React

Description

Interested in building applications that scale well, are bug free and easy to maintain?

This is a course for you. I will show you how to write reusable React and Redux code.

React is the library that modern Javascript developers need to know. Truly knowing how to write reusable React JS views and Redux reducers will get you a job, and enable you to build quality frontend applications.

Important: This course is concise and focuses on the ability to write decoupled React.js & Redux code.

All videos are professionally edited for your convenience.

Who this course is for:

Those with Javascript skills who want to learn React library and start with good practices
Experienced React developers who struggle to maintain their projects
Anyone who strives to write reusable code using modern Javascript libraries
Redux users who embrace Flux architecture but use other library for Views than React
Those who struggle to write easily testable React or Redux code

React and Redux Masterclass

What you'll learn

Explore related topics

Course content

#1: Introduction and source code deep dive3 lectures • 11min

#2: Refactoring ES6 classes to React stateless components5 lectures • 23min

#3: Decoupling React view from Redux store6 lectures • 31min

#4: Refactoring to reusable Presentational Components using ReactRedux library6 lectures • 33min

#5: Testing decoupled application4 lectures • 27min

Source Code Lectures9 lectures • 14hr 3min

Requirements

Description

Who this course is for: