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.

Master state, props, and lifecycle methods in React components. See how state holds data, props pass data from parent to child, and lifecycle methods run at key moments.

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.

Set up a React project with Create React App, install React Bootstrap, and explore the project structure. Create index.js and render age teller to the root using ReactDOM.

Create a basic react app component by extending component and implementing a render method that returns jsx. Export it as default and import into index.js to render as the root.

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 a reusable age stats component in React that displays years, months, and days since a chosen date using props. Learn to export, import, and integrate it in app.js.

Enhance a React app by adding styling and animations with an image from assets and camelCase imports. Reveal the stats after submission using a fade-in animation.

Explore the motivation behind Redux and the three step recipe: store, reducers, actions. See how a single app state stored in the store enables predictable updates across components by actions.

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.

Create and wire a remove character by ID action, update reducers to filter heroes, reintroduce removed characters to the list, and bind dispatch to props for seamless integration.

Build a squad stats component in a React Redux app that aggregates each hero's strength, intelligence, and speed from the Redux store using mapStateToProps and connect.

Explore the recipe finder app that searches by ingredients, shows a list of recipes with details and hosts, and uses Redux and API integration to manage favorites.

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.

Attach a search button to fetch recipes from the Recipe Puppy API using ingredients and dish, manage local state with onchange handlers, and build the URL with template literals.

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 Redux-connected recipe list component that maps state to props using mapStateToProps, renders each recipe title, and ensures unique keys for each item.

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.

Learn to build a connected favorite recipes list in Redux by mapping state to props, reusing recipe item components, and toggling a star favorite button for each item.

Configure routing with React Router Dom to navigate between the main recipe list and favorites using exact paths, while Redux provides favorite data and an API supplies dynamic 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.

Set up the root reducer and memes reducer, create the store, and apply Redux Thunk middleware to handle asynchronous fetch memes actions.

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.

Create a meme item component that renders an image from meme url and text from meme name via props, to display memes in the app.

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.

Craft a custom meme form using Bootstrap and React Bootstrap, with top and bottom text inputs, stateful onChange handlers, and labeled form groups for a meme generator.

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.

Learn to post memes with a redux workflow that creates meme objects via the imgflip caption_image API, using username and password, and dispatching create meme and post meme json actions.

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.

Explore the useEffect hook to apply side effects in React components, such as fetching data from the official joke API, and display the joke's setup and punchline.

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 React hooks work under the hood and how the React engine enables use state and use effect in components, and examine user query log's one-off from its state.

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.

Explore how the useState hook updates state under the hood by tracing a search input, demonstrating asynchronous state updates, closures, and re-renders in React components.

Learn to build a tasks component with multiple use state hooks, tracking task text, the task list, and completed tasks; see why splitting state enables isolated updates and easier refactoring.

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 implement a React gallery with an interval using useEffect and useState, employing a setter callback to safely update an index, looping with modulo and addressing closures.

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.

Build a new React app named Reaction to support a multi-user public board with emoji reactions while learning the reducer pattern with useReducer and useContext.

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.

Set up a reducer-driven state using the use reducer hook to manage a messages list, implement action creators for new messages, and dispatch messages with a unique id and timestamp.

Refactor the task component to use the useReducer hook, centralizing tasks and completed tasks in a single state, and dispatching actions to add, complete, or delete tasks.

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.

Create a message board component that reads messages from the reducer state and displays each message with id, text, and a human-readable timestamp, using props and then use context.

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.

Set username enables global username sharing across components by updating reducer state via context hooks, dispatching set username actions, and displaying the author alongside messages.

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.