React JS and Redux Bootcamp - Master React Web Development

Build your first React app, a personal portfolio, while learning core concepts like elements and JSX, components, state, and props to understand how React fits into web development.

Set up the portfolio app to learn React by building a real portfolio, using Create React App to scaffold the project, and configuring npm and a code editor.

Run a React project from the command line and explore how public and source directories, index HTML, and React DOM createRoot render components, with bundling and live development reload.

rebuild your react app from scratch by creating index.js, importing react and reactdom, and using createroot and render to mount a jsx element.

Learn to create a React component by extending the component class, importing React, using render and JSX to build a reusable UI.

Explore JavaScript classes and inheritance to understand how React components are implemented under the hood, with interfaces, properties, methods, and class-based instances.

Build an Animal class with a constructor and speak method, extend it to a Lion with roar, and observe how React components extend the Component class.

Explore React state as an updatable structure that powers a component, and see how displayBio toggles a bio section via a constructor, super, render, and a ternary expression.

Master setState in a React app by toggling a bio display with read more and show less buttons, binding this, and avoiding direct state mutation.

Understand why never directly modify component state in React; use setState to update state and trigger the render.

Identify class properties and initializer syntax to set state and methods without a constructor, and use arrow functions to bind this for cleaner React components.

Create a reusable projects component that renders a portfolio's project cards from a centralized data file. Import assets, map over projects with keys, and export for use in the app.

Build a reusable project component in React that uses props to display title, description, image, and link. Learn destructuring, inline styling, and side-by-side layout for multiple projects.

Tackle a coding challenge to build a social profiles component in a React portfolio, using a social profiles array of icons loaded from assets and rendered as clickable links.

Create the social profiles component in React by mapping the SOCIAL_PROFILES array to render a SocialProfile for each item, passing the profile data via props.

Wrap up with low-hanging styling fruit by applying quick css improvements, adding index.css, bootstrap, custom fonts, and a circular profile image to elevate visuals with minimal time.

Learn to build a React app from scratch, uncovering how HTML, CSS, and JavaScript work together in a client–server web environment and why create-react-app hides details.

Learn to build a React app from scratch without Create React App, load React via CDN, create a root div, and render with ReactDOM using elements and eventually JSX.

See how JSX replaces react create element with gsx syntax for cleaner elements. Explore bundling and transpilation with parcel and babel, set up via npm, to run in the browser.

Refactor the portfolio from create React app to Parcel, streamline setup, and implement dev, build, and start scripts for a minimal production workflow.

Explore why bundlers and transpilers power React development, transforming modern JSX into browser compatible code with tools like Parcel and Babel, and why the document and import/export matter.

Explore the document object model and React’s Virtual DOM, learn how React uses a lightweight virtual DOM to efficiently diff and update the real DOM for fast web apps.

Continue building your React core skills by exploring lifecycle methods, the fetch method for external APIs, stateless functional components, React Router, higher-order components, browser events, and local storage.

Explore React lifecycle methods like componentDidMount and componentWillUnmount, and learn how a Title component animates rotating titles with setInterval and modulo as it mounts and unmounts in the DOM.

Learn how componentWillUnmount cleans up a background interval in a Title component, preventing setState on unmounted components by attaching the interval to this.titleInterval and using clearInterval on unmount.

Apply css key frame animations to create a fading title effect in a React app, using title-fade-in and title-fade-out classes with state-driven timing and cleanup.

Master stateless functional components in React by refactoring class components into pure functions, using props as inputs, destructuring, and inline returns for cleaner, state-free components.

Explore how http defines hypertext messages, the request-response model, and secure https, and learn how get and post methods power api interactions in a React app.

Learn to fetch data from an api in a React app by building a jokes component that retrieves joke in componentDidMount, stores it in state, and renders setup and punchline.

Implement a feature to fetch and display ten new jokes via the random_ten API, using a fetchJokes method and a button trigger, with a local Joke component and mapped JSX.

Explore how JavaScript promises manage asynchronous fetch operations, using resolve and reject with then and catch to control execution flow and error handling.

Learn to implement React Router DOM and history to create a multi-page portfolio app, defining routes for the main page and a jokes page with browser history navigation.

Create a header component in a React app to provide navigation to the home and jokes pages using react-router-dom Link, include it on all pages, and style links inline.

Master the higher order component pattern to apply a header across routes by centralizing header rendering, using props and children to compose components in a scalable React app.

Build the Music Master project to reinforce React core concepts with a new music browser that searches artists and top tracks, shows 30-second previews, and uses a Spotify API wrapper.

Set up the Music Master project using parcel and React, initialize npm, copy assets, configure scripts, and create a reusable React app template for future projects.

Track user input by wiring a search bar, using onChange and onKeyPress to update state, then trigger a fetch for artist info and top tracks via Spotify.

Implement fetch flows to search artists and fetch their top tracks via the Spotify API wrapper. Store the artist and tracks in app state to drive the UI components.

Learn to build a stateless artist component in React that receives artist data via props, destructures fields like name, images, followers, and genres, and safely renders a circular profile image.

Create a tracks component to render artist tracks with album images and enable 30-second previews via a JavaScript audio object, implementing play/pause and single-click track switching with state.

Refactor the app by moving the input and button into a dedicated search component, lift artistQuery state via callback props, and use Redux to manage shared state across components.

Explore finishing touches for a music master app by applying structured css classes, arranging 250x250 track tiles, overlaying labels, and implementing play/pause icons.

Include Music Master in the portfolio by turning it into its own component, adding a route and header link, and launching with npm run dev to use the search bar.

Review core React concepts including components, state and props, lifecycle methods, virtual DOM, bundling, fetch with promises, and patterns like higher-order components, routing, and Redux.

Explore Redux concepts by building the evens or odds game, shuffle and draw cards with the Deck of Cards API, and maintain a persistent high score across refreshes.

Discover how Redux addresses state management in React apps by centralizing data in a global store, dispatching actions via reducers, and enforcing a unidirectional data flow through components.

Bootstraps the evens or odds React app, sets up the global Redux Toolkit store, logs the store, runs the dev server, and notes that a reducer is required.

Create and integrate a root reducer, configure the Redux store, and use getState to observe default game settings and ui flags like game started and instructions expanded.

Explore how redux actions dispatch to reducers to update the store and initialize state with default settings. See how action types like set_game_started drive updates.

Master action creators and constants to generate actions like start game and expand instructions, dispatch them to the Redux store, and update the reducer to handle new action types.

Update the root reducer to handle set instructions expanded with a switch, preserve existing state using the spread operator, and avoid mutating state when actions dispatch.

Split Redux layers by creating actions and reducers folders, exporting action types, and building a root reducer, then connect the single store to React components.

Connect your React components to the Redux store by wrapping the app with the Provider and using mapStateToProps to pass game started to app props, enabling dispatch.

Render a redux-connected UI that reflects the game started state, showing start or cancel options, and dispatch start game and cancel game actions via helpers; explore mapDispatchToProps for cleaner dispatch.

Mapdispatchtoprops attaches startgame and cancel game action creators to the component props and exposes redux dispatch, wired via connect, for onClick events.

Learn to build a redux-connected instructions panel that expands and collapses with actions, integrate it beside the start button, and prepare for async deck-of-cards api calls.

Fetch a new deck from the deck of cards API, store the deck ID and remaining count in Redux, and draw cards using the deck ID, addressing cors issues.

Explore the same origin policy, cross-origin resource sharing, and how they define origins and block requests. Compare plugin, cors anywhere, and your own wrapper to resolve dev and prod challenges.

Convert the deck fetch into a reusable redux action creator and dispatch the json result to the store. Explore wiring dispatch, mapDispatchToProps, and connect for async actions and middleware.

Explore how Redux middleware enables asynchronous actions with Redux Thunk and configure store, using a double arrow action creator to pass dispatch for fetch new deck.

Handle fetch errors in a React Redux app by refactoring deck fetch to deck fetch success and deck fetch error. Update reducers and display meaningful error messages to users.

split the main redux reducer into settings and deck slices, refactor to toolkit's combined reducers, and update components to access nested state (game started, fetch state, deck data).

Create a stateless DrawCard component that connects to the Redux store to fetch the deck ID and dispatch a draw action calling the deck of cards API.

Master the redux draw flow by fetching a card from the deck of cards API, updating the store with the card and remaining, and wiring it to the draw button.

Create a redux-connected card component that reads the cards array from the redux store, displays the first card's value, suit, and image, and guards against an undefined card.

Implement a Redux flow to track the user’s even-or-odd guess in a game state reducer, with actions, an even/odd guess component, and later track correct guesses.

Track the user's correct guesses as cards are drawn, using Redux to increment on parity matches and persist the record with local storage.

Track and persist your best guess record across games and browser sessions using local storage, with a dedicated key, numeric conversion, and a celebratory new record indicator.

Integrate the evens or odds app into the portfolio by creating a new project folder, copying files, refactoring the index, and wiring Redux Toolkit and React Redux with a route.

Build a real-time React and Redux chat app called Reaction, where users post messages, react with emojis, and see updates across multiple instances via publish-subscribe.

Apply the publish/subscribe pattern with Redux to build a real-time multi-user chat by publishing messages to a channel, then dispatching those actions to each local Redux store to update ui.

Set up a new reaction app from the template, install Redux and React-Redux, and create a route reducer. Configure the store, run the dev server, and prepare for pub-sub messaging.

Explore communication using PubNub in a React Redux workflow, implementing publish-subscribe with channels and a PubNub config json file, and a demo that publishes and subscribes to a message channel.

Create a custom pubsub class around PubNub to publish and subscribe, and wire it to Redux by dispatching incoming messages as actions to the Redux store across the network.

Build a messages redux flow by creating a new message action type and creator, a messages reducer, and pub/sub integration, using uuid and timestamps for unique items.

Build a publish message component in a React and Redux app using local state for input, a publish button, and pub sub to dispatch new message actions to subscribers.

Learn to share a single pub sub instance across components with React context, replacing multiple instances via a context provider, enabling publish and subscribe and store integration with Redux.

Install the Redux Dev Tools extension for Chrome or Firefox and configure it in createStore to inspect store state, messages, items, and dispatched action types in real time.

Create a message board component that reads all message items from the redux store and displays each item's text and formatted timestamp, using react-redux connect and mapStateToProps.

Add a username input wired to the Redux store using a set username action and reducer, then connect the input to update the username across the app.

Attach username to each message by passing an object with text and username, connect to redux to access the user, and display the author with every message.

Implement the create reaction component by exporting a reaction objects array with emoji and type, rendering reaction buttons, and publishing the reaction via the pub sub and Redux system.

Create a dynamic reaction action creator with a UID, emoji, username, and message id to attach reactions, and build a reducer that groups reactions by message id.

Connect publish reaction to Redux and pubsub, introducing a publishReaction helper that dispatches createReaction with username and message id, triggered by emoji clicks.

Create a message reactions component that renders per-message reactions from the Redux store, with guarded rendering, comma-separated username and emoji, and real-time UI updates across instances.

Include the reaction app in the portfolio by turning it into a reusable component, wiring a route, updating dependencies, and running a fresh build to showcase React and Redux integration.

Review the core redux concepts—global store, reducers, actions, and action creators—and how components dispatch actions, read the store, and use connect with mapStateToProps and mapDispatchToProps, plus middleware and dev tools.

Build a back end API inspired by Hacker News to serve stories, authors, and links for your React app, using Express.js and Node.js.

Set up a news back end with an express server, create a /ping endpoint that responds with pong, and serve a /stories endpoint from stories.json on port 3000.

Build an express API to serve news stories, expose /stories and /stories/:title endpoints, filter by title substring with res.json, and use nodemon for automatic server restarts.

Learn to implement Express middleware, including logging and access-control-allow-origin header handling with app.use and next, enabling cross-origin requests and testing with localhost 3000.

Wrap the Hacker News API inside your Express service by fetching top stories and returning parsed JSON to the client, with request calls and error handling via CORS middleware.

Implement a generic express error handler via a final app.use middleware with four parameters, log errors, guard non-200 statuses, and return a 500 Json response, routing errors with next.

Fetch top story objects from the Hacker News API by mapping IDs to items and using Promise.all for concurrent requests, returning a full top stories array.

Explore how the deck of cards and spotify wrapper APIs reuse express backend patterns, implement rate limiting by ip, open cors, and token authentication for front-end access.

Build a news react client inside the express project, merge client dependencies and scripts, and serve the client dist as static files with the express server for a single deployment.

Fetch top stories from the express backend, store them in state, and render them in the React UI with links, author, score, and formatted timestamps.