React js. From the beginning. w/ Redux and React Router

Open your editor and create a root server.js in section one to mirror the code structure and illustrate using Express with React tooling.

Explore how a basic React app uses React, React Dom, Babel, and jsx to render an h1 via React.createElement, with Babel compiling jsx for browser compatibility.

Learn how reactdom.render builds and updates the UI via the virtual dom, using plain, cheap React elements and comparing old and new trees to update only changed parts.

Practice building reusable components and props by rendering four image-backed cards in a React app, using data.js and App.js to map digital marketing course data to Card components.

Break down components into smaller pieces to improve modularization, reuse, and readability in a React app by mapping data to city cards and rendering with props and Lorem Pixel images.

Review core React concepts like components, props, JSX, Babel, and the virtual DOM, and see how React elements render with ReactDOM.render. Prepare to explore state and Create React App next.

Embrace vite, the fast modern tool for React, as an alternative to deprecated Create React App. Enjoy instant updates with es6 modules and hot module replacement via npm create vite.

Learn the do's and don'ts of React state, using setState, avoiding direct assignment, and understanding this binding, constructor initialization, arrow functions, and the role of props.

Learn how events drive state changes in React by handling onClick, onChange, and onSubmit in class components. Pass callbacks rather than invoking them, use event objects, and prevent form actions.

Explore how React's synthetic event wrapper normalizes browser differences, covering mouse and pointer events like click and drag, and reference the synthetic event docs for HTML versus JavaScript examples.

Explore the difference between stateful and stateless components in React, including how props are immutable, how state is managed, and the idea of presentational, pure functions.

Learn to fetch current weather data with axios from openweathermap's free API, building a city-based request URL with your API key and handling the response.

Explore the React component API and lifecycle from documentation to practical mounting, updating, and unmounting patterns, including class vs function components, props, state, and key lifecycle methods.

Refactor the weather widget by extracting headers as a functional component and modal as a class component, passing temp, is raining, city name, high and low via props.

Discover how component will unmount enables cleanup when a modal is removed from the dom, stopping timers and canceling network requests to prevent lingering tasks.

lift state up to a shared calculator component by refactoring into a temperature input component, wiring Fahrenheit and Celsius inputs that sync via a passed-down handle change function.

Learn how to style React components with inline styles vs. class names, using camelCase style objects, applying or swapping to encapsulated CSS with styled components.

Build and wire a quiz bar component in React, converting a class to a function, styling with bootstrap nav pills, and using font awesome icons via react font awesome library.

Eliminate copy-paste by building a quiz array of objects with icon and type, then map over it to render four quiz types; centralize data so updates apply in one place.

Create a React flash card component with three subcomponents—random weighted, multi card, and regular card—using state to toggle a flip class and a 3D flip animation.

Add a spinner to show loading during the asynchronous Ajax fetch of a new flashcard, using a ready state and Font Awesome until the data arrives.

Implement flash card logic by selecting card style (multi, regular, random, weighted) and rendering the corresponding card with question data. Map options to A, B, C, D.

Learn how React Router provides navigational components to control the URL bar, enabling bookmarkable deep links and back/forward navigation within a single-page app.

Learn to implement dynamic urls with react router dom by using the match object and params. Build a simple router with routes like / and /about/:who, then access the params.

Create a mini movie fan app in React by fetching now playing data from the movie db API with Axios, storing results in state, and rendering a poster grid.

Learn how Redux and React operate as separate systems and connect through React Redux, using actions, action creators, reducers, and a store, via provider and connect for app-wide state.

Introduce action creators for frozen, meat, and produce inventory updates, implement increment handlers with plus and minus, and set up dispatching actions to reducers in a redux workflow.

Connect your React component to Redux by wiring dispatch through mapDispatchToProps and bindActionCreators, sending actions with payloads to reducers to update the frozen data.

Learn how to integrate React Router with Redux in a single app.js setup, create routes for department pages like frozen, meat, and produce departments.

Implement a clear inventory action and bind it via mapDispatchToProps. Update reducers to reset quantities when the action fires, showing Redux state management.

Walk through a Redux-based weather app codebase, wiring reducers and actions, and learn why axios calls need custom middleware to handle async actions before dispatch.

Build a self-contained React spinner component using Font Awesome and drop it into any project. Center the spinner with CSS—absolute positioning, left 50%, transform translateX(-50%), and top 40%—to indicate loading.

Build activities on the home page by fetching /activity/today data with Axios, render an activities component that maps over activity data to display individual activity components.

Create a single venue page component in a React app, using React Router to render a '/venue/:id' route, fetch venue data with Axios, and display image, location, title, and guests.

Finish the city details page by adding left and right detail panels, price, rating, date pickers, guest selector, and a reserve button, with basic authentication and Redux groundwork.

Design and implement a login, registration, and logout modal using react and redux with routing. Copy modal css and js, wire up connect and bind action creators, and prep App.js.

Learn how http enables front-end to back-end communication, powering authentication, http requests and responses, headers and bodies, and mime types for translating data between systems.