React: Web Apps with ReactJS and Redux - The Complete Course

Clone the boilerplate repository, install dependencies with npm, open the project in your code editor, and run npm start to launch the React app on localhost.

Explore the first glance project by examining package.json, installing dependencies with npm install, and using the dev server to edit index.html, apply styles, and observe declarative rendering in action.

Explore building React apps from the entry point index.js, importing and exporting components, and writing ES6 JSX. Create functional and class-based components, transpile to ES5, and style with bootstrap.

Build a small React app to learn the basics of React, connect components, and manage state, then display Pokemon by type with images and stats after a search.

Explore a pokemon app workflow using a public api to fetch types and pokemon data, inspect json responses, and build a react select component that manages state for type selection.

Develop a React-based Pokemon type selector by managing component state, styling a container, and mapping a select element's options to normal, fighting, and flying types.

Initialize and manage a React component's state with a constructor and super, then bind inputs. Explore string, number, array, and object types and view console updates as state changes.

Explore managing state in a React app by handling select changes with onChange, accessing event.target.value, binding methods, and debugging console outputs to update component state.

Update parent and child state in a React Pokemon app through on change, render on state updates, and fetch basic data from the Pokemon API after wiring a hard-coded UI.

Learn to handle button clicks in a Pokemon type search app by preventing default submission and updating state from a select input using on click and on change.

Learn to wire a button click to a fetch-based api call, handle the json response, and reveal data in the ui while monitoring loading time.

Fetch API data from an endpoint, map types to a dropdown, store the results in a React class component's state, and render with error handling.

Create a pokemon list component in a React app, import components, manage props and state, implement a random method and render a hello message for each Pokemon.

Learn how a parent component passes state to child components via props to build a Pokemon list, handle type selection, and update the UI from API data.

Learn to implement conditional rendering in a React component using inline conditions and render decisions inside the render method based on props and list length.

Iterate over a large array, map items to Pokémon cards, manage keys, and fetch API data with dynamic parameters while debugging the render logic.

Develop a Pokeman app using ReactJS and Redux, wiring a free API with template literals and backticks, managing loading states, and handling slow or blocked requests.

Explore dynamic API fetching in a React app: pass a type to fetch, render a commands list with a dropdown, and fetch selected pokemon details (name, weight, height, pictures).

Explore a Pokemon app that lets you search by name or number, maps data to render Pokemon components, and handles on-click events to show details.

Build a pokemon style app in React by initializing component state, fetching data via API, and rendering a sprite image with height and weight, with conditional display and error handling.

Explore a React Redux app by toggling a boolean flag to render pokemon details and image on click, bind props, and fetch data with state management.

See how React components render a pokemon using props and state while fetching data from an API. Learn why Redux provides a global store for managing state in complex apps.

Use git to view solution branches from a boilerplate project. Explore how state and props drive component nesting, JSX, and list rendering.

Explore how Redux provides a global store to manage app state with unidirectional data flow from user actions to UI rendering.

Explore building a zookeeper app with React and Redux, learning actions, reducers, and a fake API, then clone the boilerplate, install dependencies, and run the project locally to manage moods.

Init app root reducer teaches building a React boilerplate with a class component, exporting it, and wiring an index file while introducing combine reducers to manage user data.

Upgrade your app by integrating redux with a provider, creating a store with applyMiddleware, organizing reducers, and wiring the index entry point to supply the store.

Create a new reducer that exports a function returning an array of animal objects with name, gender, and age, and render them in a list component.

Bind Redux state to component props using connect, map state to props, and map dispatch to props to manage app data flow.

Learn how to map the Redux store state to component props using connect, bind application state to components, and create containers as higher-order wrappers around presentational components.

Explore implementing Redux actions to update animal details on click, creating action creators, dispatching them via connect, and updating the details panel through the store.

Fixes an actions problem by binding the selected enemy to click events, dispatching a typed action with a payload, and ensuring the reducer updates the store accordingly.

step back to review how a connect method binds state and dispatch to component props, dispatching an action with an enemy payload and handling action types in the reducer.

Learn to build an animal details view by wiring a React component to the Redux store, mapping state to props, handling initial loading state, and rendering selected animal attributes.

Prepare a json-server API to fetch data and simulate a database for your React app, wiring ajax calls and routing to local endpoints.

Explore how to use Postman to interact with your API, sending GET and POST requests to localhost:3000, and manage JSON data in the request body.

Postman 2 covers posting a JSON object with a correct body, ensuring unique IDs, and validating results in the API database, then generating fake data to power a mock API.

Learn how to generate realistic test data with faker, install and use a fake data library, create API routes that return entities, and fetch data from a local server.

Explore how to navigate Git branches and boilerplate code to view the zookeeper project solutions, inspect commit history, and understand code state within a React Redux workflow.

Switch to the zookeeper branch, check out master, fetch updates, clone the boilerplate, install dependencies, and verify status before proceeding with redux and react.

Learn to replace static data with dynamic server-sourced data using Redux thunk middleware to handle asynchronous actions, manage a Redux store, and integrate a promise-based API in a React app.

Learn to trigger Redux actions from a React component, fetch data from a server, wire actions with mapDispatchToProps, and handle payloads and asynchronous requests.

Refactor the action into a redux thunk to dispatch the resolved payload, then fetch the animals list on component mount and manage an empty list.

Explore the React component lifecycle and core lifecycle methods used during mounting, updating, and unmounting, including how props and state influence render and when to initialize or clean up.

Explore render race conditions when data fetch happens on component mount, bind API data to the store, and observe two render cycles driven by prop and state changes in React.

Fetch API results and render an enemy list in React by mapping over the data and displaying each enemy's properties.

Add a post feature and delete capability by building a form, dispatching a post action to save new items to the database, and adding a delete button to remove items.

Learn to create a React class component, render a form with name, age (number) inputs, a gender select, and bootstrap styling to align fields in a row.

Learn to bind input values to component state in React by wiring name, age, and gender fields as controlled inputs with onChange handlers.

Manage component state by binding inputs to a state object and handling onChange to update values, converting numbers with parseInt, and observing unidirectional data flow driving renders.

Learn how to build and manage form state for a post request in a React/Redux app, including a gender select, onchange handling, and submitting data to a route.

Learn how to implement a Redux based create operation using axios post, dispatching a create action with the response data as payload, and exporting the action type.

Bind dispatch to props with connect and bindActionCreators to expose the create action from Redux to a React component.

Learn how to wire up a create-animal action to a post request, observe dispatches in the network tab, handle responses and IDs, and update the UI accordingly.

Update the list after dispatching a create action by using the reducer and payload, so the store updates the state and the user interface re-renders with the new item.

Implement a delete function in a React Redux list by wiring a delete button to dispatch a delete action by id, trigger API calls, and refresh the list.

Implement a delete reducer that updates the list by filtering out the item with the given id, using the action payload and returning a new state.