React and Redux Masterclass

Split the calculator app into a clean file tree by refactoring the Calculator component. Export store and event emitter and wire in display, control panel, digits, operators, and history.

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.

Refactor the control panel and operators from class components to function components, update imports, export each function, and ensure history is displayed when testing with yarn start.

Refactor a stateful display component into a function component, wiring text and clickHandler props, introducing updateDisplay and a state variable with initial value zero, and addressing render timing.

Make the display stateless by passing text from props, lift the update listener to the calculator container, and use force update to ensure digits render correctly.

Install redux and update package.json and yarn.lock, then create a store with initial state and enhancers, and a root reducer by combining reducers.

Create the first Redux action handler and expression reducer to manage the current expression, wiring get state and dispatch through actions to update digits, clear, and backspace, with history control.

Remove the event emitter dependency by introducing a toggle history action dispatched through the store, and implement a show history reducer to flip the history state.

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.

Learn to decouple history from the store by passing show history and history as props, removing JSX store coupling and imports, and preview container component patterns.

Decouple component logic from its presentational layer by introducing a digits container with react-redux connect, mapping state and dispatch, and a digit click action to update the expression.

fixes a history tracking bug by using redux thunk to update history with the latest expression on digit clicks.

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.

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.

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.

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.

Learn to write smoke tests and sanity tests for a button component using enzyme and shallow rendering; verify rendering, spans, class names, and a click handler.

Learn how to leverage enzyme public tests to master React testing, exploring shallow wrappers, class and stateless components, context access, and the 95%+ test coverage showcased with sinon and chai.

Learn to check your app’s test coverage with yarn --coverage in a Create React App, read the coverage report, and fix a backspace comma bug by writing tests.