The Complete React Js & Redux Course - Build Modern Web Apps

Set up your development environment by installing Visual Studio Code from code.visualstudio.com, choosing mac or Windows, and extracting the downloaded zip, or skip if you already have a code editor.

Install Node.js, verify the installation with node -v and npm -v, and understand npm as the node package manager used to install server dependencies in the mean stack.

Explore the ES6 crash course, an optional primer for JavaScript beginners or experienced developers. If you’re familiar with JavaScript, skip ahead to React.

Explore var and let in ES6, uncovering function versus block scope, proper variable reuse, and how let prevents global leaks for cleaner, bug-resistant code.

Explore the differences between let and const in ES6, including block scope, function scope, and rules for reassigning values and updating object properties.

Master ES6 arrow functions and their concise syntax, learn to transform arrays with map and filter, compare with ES5 functions, and apply implicit returns for cleaner one-line code.

Discover how ES6 template strings replace ES5 string concatenation by interpolating variables inside backticks using curly braces, with practical name and age examples.

Create and instantiate a function constructor to build an object with name and age, add a prototype method speak, and prepare to replace constructors with ES6 classes.

Learn ES6 classes, declare objects with a constructor, and name and age properties. Explore a prototype method speak, inherit it, and a birth method to manage a children array.

Explore how the spread operator expands arrays and objects, showing concise ES6 techniques to merge and spread data, and prepare for Redux integration.

Discover how React builds user interfaces with components, the compositional model, and the virtual DOM, then render UI efficiently using elements and DOM nodes.

Create React App helps start a React project quickly, with Babel and Webpack behind the scenes. It compiles ES6 to ES5 and bundles assets.

Learn to create and render React elements with React DOM, rendering a Hello world header to the root DOM node while mapping arrays and using unique keys.

Learn to render a dynamic task list with JSX by mapping an array to list items, using unique keys, and wrapping adjacent elements in a div.

Explore the compositional model in React by creating JSX-based reusable components, composing a main component from subcomponents, and configuring them with props to render dynamic lists.

refactor a react app by splitting components into separate files under source, creating list.js, title.js, and main.js, exporting and importing them, and rendering via index.js to improve organization.

Explore building a photo wall with React state management and React Router, learn adding images via URL, viewing with descriptions, navigating between pages, and deleting pictures.

Explore app setup by building a photo wall with React components, wiring a photo grid with mapped posts, and integrating CSS to style a responsive grid.

Map a posts array to photo components in a photo wall, rendering images from post image links with alt text from post descriptions. Style with css and include remove button.

Convert class components to stateless functional components by treating render as a return and accessing props through function arguments to render a title and a photo wall of photos.

Explore how state management in React enables dynamic updates by updating a component's state (like a posts array) and triggering re-renders to update the UI.

Update the component state to remove a photo from the post array, triggering a re-render of the photo wall, and pass the remove photo function via props with correct binding.

Validate React component props with the prop-types package, enforcing that posts is an array and onRemovePhoto is a required function, preventing runtime errors and easing debugging.

Explore React lifecycle methods, starting with constructor for initial state and render for UI, then fetch data after mounting with componentDidMount, update state, and trigger re-renders.

Navigate between pages with React Router to build a single page application, enabling adding photos to a photo wall and managing component state to rerender the user interface.

Navigate between the photo wall and add photo screen using component state, a navigate prop, and bound handlers, with css styled add button.

Learn to build navigation in a React app using browser router, link, and route to keep URL and UI in sync and enable back button support.

Discover how the link component replaces anchors to navigate the app. The browser router updates the URL via the to prop, syncing the UI with the root path.

Configure react routing with a browser router, mapping routes for / and /add photo, using render or component props with exact matching to render UI and enable back navigation.

Set up the photo wall UI by building an add photo form with image URL and description inputs, and apply styling and hover effects for a polished second page.

Add photos to the photo wall by handling submission, binding this, preventing default reload, and updating the main component state with the new post via a callback prop.

Sort posts by id to show the most recent first, using the current date as the id for new posts, and render a photo wall in descending order.

Re-implement the photo app with Redux to manage state and enable photo comments, and compare Redux with component state to explain when to use each approach.

Explore how Redux centralizes app data in a single store and keeps state read-only, updated only via actions and reducers. This makes state changes predictable and easier to debug.

This lecture introduces Redux by detailing a centralized store, immutable state, and how actions, a producer, and reducers—guided by a root reducer—update the UI with initial data.

Create a posts reducer to handle state updates, dispatch actions like remove photo, and initialize the store with sample posts, preparing to connect Redux to React with React Redux bindings.

Connect your Redux store to your React app using the provider and connect, mapStateToProps, and actions to render posts in the photo wall from the top-level main container.

Dispatch actions to update state by using action creators, dispatch, and reducers; remove posts with an index payload, and bind action creators for streamlined Redux usage.

Update redux state by removing a post at the clicked index with a remove post action. The reducer returns a new state via slice and spread, preserving read-only state.

Submit posts via Redux by emitting add post actions with payloads, updating the posts array in the reducer, and wiring add photo form submissions with routing and navigation.

Install and use Redux Dev Tools in Chrome to debug a React-Redux app by inspecting actions and state diffs. Time travel with slider to review action history and payloads.

Set up the add comments page by linking image clicks to a single photo screen that displays the image and a comments form, styled with the provided css.

Add a comments feature with its own Redux reducer, combine it with posts in a root reducer, dispatch add comment on form submit, and render updated comments.

Learn to manage comments in a Redux store by keying per post id, pass post id with each comment action, and render only the relevant post's comments.

Completes the comments section by adding a message icon with a post comment count, clears the input after submission, and links the image to another page using the button style.

Link Firebase to your React Redux project to persist Redux store data in a real-time database, ensuring posts persist across app reloads and are fetched on startup.

Connect your React Redux app to Firebase, configure authentication rules, and use thunk to read and write a NoSQL database with root and posts and comments nodes.

update the database first when a post is submitted, then dispatch an action to refresh the Redux store and render the UI using thunk and Firebase.

Fetch posts from Firebase using an async action creator, load them into Redux with a load posts action, and re-render the UI when the store updates.

Export a function to remove posts by index and ID, remove the post node in Firebase via a database ref, then dispatch remove posts action to update the Redux store.

Persist comments in Firebase by creating a new comments node under the post ID, pushing each comment with a unique ID, and dispatching a Redux action to update the store.

Load comments from Firebase by observing once for each post, then store in Redux as an object mapping post IDs to comment arrays, dispatching on component mount to persist data.

Debug a React and Redux app by using component state for loading. Learn to prevent crashes when posts are missing and leverage loader and no post found messaging.