Web

Modern CSS Fundamentals Baseline Progressive Enhancement Logical properties and values CSS Reset CSS Cascade Layers CSS Custom Properties (variables) Colors Typography Media queries and custom properties Structured custom properties Base styles Meaningful links Big picture design system Wrappers Modifiers Option 1: BEM approach Option 2: Data attributes Landmark regions Gems Resources Modern CSS Fundamentals Baseline Baseline features are ones that are supported by all the major browsers (Chrome, Edge, Safari, and Firefox). Both the MDN web docs and caniuse show when a feature has reached either the Newly available or Widely available threshold. ...

Once you start working with React in anger, there is a tipping point to be aware of where: the complexity of data flows piles up the same data is being rendered in multiple places the number of state changes blow out Being able to tackle these problems in a single place is where Redux fits in. Contents Contents The Problem Option 1 lift the state Option 2 react context Option 3 Redux A chat with redux Container vs Presentation Components The Redux Principles Actions The Store Immutability Reducers React-Redux React-Redux Provider React-Redux Connect mapStateToProps mapDispatchToProps Redux Setup Async and APIs Mock API API Client Wrappers Redux Middleware Redux Async Libraries Thunks Conditional mapStateToProps Polish (the finer things) Spinner component Status API and feedback Server side validation Client side validation Optimistic deletes Testing Redux Connected Components Action Creators Thunks Reducers Store The Problem Imagine a fairly deep component hierarchy, starting with your top level App component. Deep down the tree, there are two child components that need to access a common piece of data (e.g. customer data). How should these components access the data they require? ...

React Development environment Boilerplate Webpack Babel NPM scripts ESLint Production dependencies Development dependencies JSX Components all teh things DOM control Styling Rendering Lists Handling Events State Management Option 1: Binding Option 2: Arrows Passing Parameters Component Composition Passing Data Passing Children (passing down JSX) Three Rules about State Raising and Handling Events between Components Passing Object props Controlled Components Synchronising Components Stateless Functional Components Destructuring Data (Arguments) Functional components Class components Life cycle Hooks Phase 1 the birth phase (mount) Phase 2 the update phase Phase 3 the death phase (unmount) Effects (hooks) Debugging React Router Testing Jest React Test Utils Enzyme Production Redux store config Webpack Setup npm scripts Troubleshooting React React is a JavaScript library for building dynamic and interactive user interfaces. ...