React, Redux & Material UI Workshop for Beginners

Learn what React is as a JavaScript library, not a framework, enabling incremental adoption and a fast virtual DOM with a component-based UI, backed by Facebook.

Discover how React uses a virtual DOM to mirror the real DOM, enabling faster manipulation by rendering only the differences between the two, rather than the entire page.

Learn how GSX lets you write HTML-like syntax inside JavaScript to build the virtual dom and render it with React Dom Render, including className and camelCase handlers.

Explore how to render components inside JSX by composing a parent with child components, like user info, and reuse them through props while preserving state and side effects.

Learn to bootstrap a React app with Create React App, explore component-based development, and practice converting parts of a website into function-based components with hooks.

Explore what Redux is as a centralized, predictable state management solution for any JavaScript library, not just React, and learn debugging with its time travel tools and ecosystem.

Master the three principles of redux: a single global store as the only source of truth, read-only state, and applying changes through dispatched actions and a pure-function producer.

Dispatch actions with a type and payload, then middleware handles asynchronous calls in the redux saga workflow before reducers produce the new state.

Designs a to-do app interface with material components, including an app bar with logo and title, a text field and add button, and separate to-do items and completed sections.

Design a todo item component using Material UI elements, featuring a checkbox to mark completion, a delete icon, and an important flag, all within a list item styled with typography.

Create the react app from scratch using npx, generating public and source folders with a ready package.json and react and react-dom dependencies; Inpex provides boilerplate out of the box.

Boot a React app from scratch, run it on localhost:3000, set up index.js and a basic app component, and install Redux, Redux Saga, Redux DevTools, and Material UI with icons.

Set up redux-saga from scratch by creating actions, middleware, and reducers, binding a store to the app with react-redux provider, and implementing takeEvery to manage a to-do initial state.

Add an app bar with a toolbar, typography, and a 50-px logo from the public folder, importing typography and components, using static positioning and an icon button with alternate text.

Create and apply styles using makeStyles and useStyles in a JavaScript stylesheet, then build a UI with Material UI containers and papers, centering content with padding, margins, and color tweaks.

Build a Redux-driven to-do app in React using Material UI, with a text field and add button to create items, dispatched actions to update state, and checkboxes to toggle completion.

Toggle a todo's completed status by dispatching a toggle completed action with its id, updating state to flip the completed flag and apply a strikethrough.

Use a delete icon from material icons as a secondary action in the todo list, dispatch a delete todo action, and update state by filtering out the removed item.

Resolve todo adder issues by wiring the TextField input to a ref, clearing the field after each add, and conditionally adding only when a title exists to avoid empty items.

Learn how to persist a to-do app's state in the browser with local storage, using setItem, getItem, JSON.stringify, and JSON.parse to survive page refreshes.

Learn how to use Jest for simple, fast JavaScript testing with zero config setup. Explore test blocks, snapshots, Babel integration, code coverage, and mock techniques to test your functions.

Install npm packages and babel presets, configure babel for jest, then run unit tests to validate redux reducers and the register file.

Learn to write unit tests for a redux reducer by mocking external libraries, defining an initial state and actions like add todo and toggle completed.

Generate coverage report to assess unit tests by adding a coverage script, producing a file-by-file table of statement coverage percentages, and aiming for 100 percent coverage for reliability.