React JS - Mastering Redux

Master React components and JSX to build dynamic web UIs, render with the render method, and manage state to compose scalable interfaces for web, mobile, and beyond.

Previewing AgeTeller demonstrates building a React app that computes years, months, and days lived from a birth date input, with a sample output and useful libraries to help build.

Craft a form component using React Bootstrap to input a date with an inline layout, styled by Bootstrap CSS and custom CSS, including a date picker and submit button.

Add and manage state in a React ES6 class component by using a constructor and super, updating a date picker value with this.setState and onChange to track a birthday.

Build the Redux application by creating a Super Squad app that lets you add and remove heroes with a plus button, with state updates reflecting squad stats in real time.

Set up the super squad app with Redux and React Redux, structure the project with source and components, and begin integrating Redux with store, reducer, and actions.

Create the first characters reducer for the super squad redux app by importing characters json and setting a default state. Export the reducer to prepare the store and handle actions.

Set up the Redux store in index.js by importing the root reducer, creating the store with createStore, wrapping the app in a provider, and verifying state with store.getState.

Create the first Redux action by id and wire it to the reducer to shrink the character list, then dispatch and subscribe to observe store updates.

Learn to add a second redux reducer named heroes, implement a create character helper, and wire add character actions, then combine reducers and organize code into separate files.

Connect a character list component to Redux with mapStateToProps to render characters from the store. Implement the connect flow and render a dynamic list of character names from state.

Explore how mapStateToProps and mapDispatchToProps bind Redux state and actions to a component’s props. Use bindActionCreators to bind addCharacterById and apply a connect shortcut for concise code.

Style the redux app by importing bootstrap css, creating a styles/index.css with an app class (centered text, 5% padding), and applying list group and item classes for a polished ui.

Create a hero list component that maps over heroes from the Redux store, connects via mapStateToProps and mapDispatchToProps, and renders a side-by-side grid with the character list using Bootstrap columns.

initialize a recipe finder project with create react app, install redux, react-redux, react-bootstrap, and react-router-dom, then build index.js and app.js and render the app to the root.

Build a search recipes form in a React app using React Bootstrap, with ingredients and dish fields and a submit button, styled with centered inline layout.

Fetch data from an API using JavaScript's fetch, handle the response with promises and then, convert to JSON, and display recipes in a Redux recipe finder app.

Learn to store API recipe results in a Redux store by creating a set recipes action, a recipes reducer, and wiring the store with provider and connect.

Create a custom React recipe item component using props and destructuring to render title, image, and ingredients, with links and styling for a polished flex layout.

Explore adding favorite recipes to a redux store by creating a favorite recipe action, reducer, and UI interactions with a star button, including store updates and connect usage.

Toggle the recipe item's favorited state with a component boolean, render a full or empty star via a ternary, and update the Redux store to list favorite recipes.

Build a meme generator with Redux, loading memes on start, previewing themes, entering text, and generating memes via get and post API requests.

Set up a meme generator project with Create React App, install Redux, React Redux, React Bootstrap, and Redux Thunk, and render a welcome app.

Learn how to access the image flip memes API by creating an image flip account, obtaining credentials, and securely storing them in a secrets.js file for API requests.

Explore how to implement asynchronous redux actions to fetch memes from the api.imgflip.com get_memes endpoint and dispatch receive memes with the returned json.

Connect the app to the Redux store, map over memes, and render meme names, then implement a local meme limit with a load ten more button to incrementally display memes.

Apply hover-based animations to meme items in a React component by managing hover state, toggling css classes, and fading in text while darkening images.

Discover how to enable memes in a Redux-powered React app by wiring text props, posting memes with a new action, and storing them in state for API-ready use.

Create a Redux-connected My Memes component using connect to map the My Memes array from state and render each meme as a styled image.

Explore React hooks by writing use state and use effect code while building a Home app with a custom search bar, a random joke, and a task list.

Set up your first React project by bootstrapping with create-react-app, cleaning the template files, loading shared CSS, and launching at localhost:3000 to begin using React hooks.

Explore how the useState hook in function components manages user input and drives a Google search, including on change handling, console logging, and enter-key support.

Master the stories component by fetching top stories from a news proxy API with useEffect, managing state with useState, and rendering clickable titles with author and formatted time.

Create a reusable useFetch custom hook to fetch data and manage results. Pass a url and initial value to share fetch logic between joke and stories components.

Explore why function keyword and arrow function differ in this lecture, compare this binding, refactor the app component to an arrow function, and clarify when to use each.

Explore how the React runtime builds and updates the dom via reconciliation, and how jsx enables inversion of control. Discover how hooks like useState and useEffect augment components.

Build a tasks component that marks tasks as completed by moving them from tasks to completed tasks using a complete task helper, with on click handler returning a function reference.

Explore how useState hooks work under the hood by varying hook call order, showing React binds state by order rather than names, and how naming differences affect behavior.

Persist tasks and completed tasks with local storage by using helper methods to store and read data, a storage key, JSON.stringify/JSON.parse, and useEffect to save on every render.

Learn how to clean up interval updates in a React component by toggling a gallery with a show state, using useEffect cleanup to prevent memory leaks.

Learn to build dynamic gallery transitions with React hooks by exposing user-controlled delay and increment using useState and useEffect, including input handling, min delays, and cleanup.

Create a matrix-style animation component in React that cycles through frames with a useEffect interval, using a dynamic delay and increment and a reusable hook.

Develop a custom hook use dynamic transition to drive and return the picture index for gallery and matrix components, parameterized by delay, increment, and length, enabling a reusable dynamic transition.

Discover why React hooks were introduced to treat components as a distinct concept, enabling state and effects through hooks like use state, use effect, use reducer, and use context.

Master the reducer pattern by managing a global store with reducers, actions, and dispatch from components, enabling a unidirectional data flow and scalable React apps with useReducer.

Bootstrap the reaction app with Create React App, install React and react-dom with hooks support, add UID module for unique IDs, refactor to a functional component, and set up css.

Master the useReducer hook to manage tasks by adding, completing, and deleting with action types and a reducer switch, using immutable updates and local storage.

Learn to build a publish message component in a modular react redux app, handling text input, dispatching new message actions to the reducer, and supporting enter-to-submit.

Learn how React context and the use context hook share state and dispatch across components via a provider, and apply a pub sub pattern for multi-user messaging with a hook.

Explore the publish-subscribe pattern integrated with a redux-style reducer flow to power real-time multiuser chat. Publish actions to a channel; subscribers dispatch to local stores and update user interfaces.

Explore the pub nub architecture to support multi-user publishing on a main message board, publish and subscribe to channels, and react with emojis using a cloud pub sub service.

Create a reusable pub sub function with subscribe and publish, connect action objects to reducers via use effect, and demonstrate multi‑client message sharing across two app instances.

Export a reaction objects array of emojis, render a create reaction component that maps over it to show emoji buttons for each message, and prepare for reducer and pub-sub system.

Create a dynamic reaction action creator with emoji and username, linked to message id, and update a reactions map in the reducer to track per-message reaction arrays.

Hook up publish reaction by wiring emoji clicks to publish actions via the pub sub system, using create reaction with username and message ID to update reactions.

Build a message reactions component to display user emoji reactions by mapping a reactions array from props, guarding undefined, and rendering each username with its emoji, separated by commas.