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.

Set up a basic node express server to serve static front end files, using JSX, Babel, and ES6, install express via npm, create Server.js, and run on port 3000.

Launch your first React program by loading React via content delivery network and babel standalone, render H1 into root div with React Dom, and run Express server at localhost 3000.

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.

Master how to pass data to React components with props, creating reusable cards by rendering the same component with different data while preserving prop immutability.

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.

learn how to generate an array of card components from data using map, pass course data as props, and assign unique keys (using index) to optimize rendering in React.

Convert function components to class components by extending React.Component and implementing a render method, using a constructor and super, and accessing props as this.props for encapsulation and future state use.

Practice core React fundamentals by turning a Nav component into a class, using props to pass a data array of icons and titles, and rendering a mapped list with JSX.

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.

Explore state in React as the value of variables that drives data changes, reduces DOM mutations with the virtual DOM, and enables modular components and props for scalable front-end apps.

Explore building a stateful class component in React, creating a state in action with a constructor, initializing state, and a timed setState update that renders text in an h1.

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.

Combine props and state in a React card set to render course cards, manage selected cards immutably in state, and display saved choices via prop-driven data flow.

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.

Explore stateless functional components and stateful components in React by building a card list where card renders output from props while card set manages state and responds to user interaction.

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.

Demonstrate a React flashcard app with an API backend, featuring random, regular, weighted, and multi modes, modals, and AWS service category mappings, built with Redux and React Router.

Set up a React app named flashcards, integrate bootstrap, and convert app to a class component to manage state. Render a four-category quiz bar and a conditional modal and flashcards.

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.

Move the ready state up to the app level to coordinate card style and data fetching, using props to trigger new cards and display a spinner during Axios requests.

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.

Explore how to set up React Router DOM with BrowserRouter, Route, and Link to build a single router-driven React app with exact paths and internal navigation.

Create a nav bar with React Router using NavLink to highlight active routes for home, host, help, sign up, and login. Import Materialize CSS and convert anchors to links.

Learn how routes use the component and render approaches to display components and pass data, including passing a title via a render callback.

Implement nested routes in React Router by building a help component with sub-routes for customer and host, using Route and Link to render dynamic content.

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.

Make movie posters clickable to open a dynamic movie page using react-router links and a /movie/:movieId route, passing the poster's id to fetch and display that movie's information.

Build a dynamic movie details page in React by fetching data with Axios using a parameterized URL and movie id, rendering the poster path, title, budget, tagline, and overview.

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.

Learn how Redux uses a store, reducers, action creators, actions, and dispatch to update the app state, with emphasis on type-driven actions and payloads.

Wire up a Redux and React app by wrapping it with the React Redux provider, creating a store with createStore, and using combineReducers to form a root reducer.

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.

Understand redux middleware, which runs code between dispatch and reducer, and see its role in a basic React Redux setup with Redux Promise, Redux Thunk, and Saga.

Discover how Redux middleware intercepts dispatched actions, connects reducers and action creators to the store, and uses dispatch via connect and mapStateToProps to manage async API calls.

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.

Learn how to handle asynchronous actions in Redux by applying redux-promise middleware that dispatches the resolved value of a promise and enables async data flows.

Build a two-iteration Airbnb clone using React, focusing on modular UI, components, props, and state. Learn through project-based wiring, an API, basic login, and refactoring for scalability.

Set up the initial React app structure by creating reducers, actions, and pages folders, organizing home, utility components, and navigation subfolders, and remove unused files to prepare for Redux integration.

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.

Populate cities on the homepage and display them in a carousel slider using axios. Refactor into a cities component; map data with image, name, and price per night.

Refactor the home page by adding a fluid container with 80-pixel gutters, render a 'recommended cities for you' header, and fetch multiple city endpoints in parallel using Promise.all.

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.

Finish the activity component by destructuring props, rendering image, type, cost, and rating with a star, using a two-of-twelve grid, and linking items to /activity/:id and city routes.

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.

Develop a reusable modal in a React app with Redux to control visibility across all pages, wired through app.js, a site modal reducer, and a navbar action.

Learn to manage a modal with redux by passing content through props, toggling open and close actions, and wiring login and signup components to the modal.

Learn the fundamentals of authentication and how http and network traffic enable verifying and tracking users, building a clear frame for secure login in a React app.

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.

Explain http's statelessness and token-based authentication, showing how a login grants a token and future requests carry it to identify the user, with React and Redux managing state.

Explore Json web tokens for authentication: decode, verify, and generate JWTs with jwt.io; understand red, purple, and blue parts and how a React client and Node server exchange a token.