The Ultimate App Making Course! Master Many Coding Skills!

Learn how React uses the virtual DOM to observe data changes and re-render only the affected parts of the DOM, illustrated with a live render demo and selective painting.

Build React ES6 class components by extending React.Component, using render and lifecycle methods, mapping data with a name mapper, and set up a webpack dev server for live reloading.

Split your code into reusable React components, organize files in a components folder, and use import and export to render a modular, live-reloading ui.

Create a separate welcome component file in React and convert it to a class component. Access props to render first and last names and pass them from parent to child.

Learn to validate React component props using PropTypes, enforce required strings, set default props, and create custom validators for robust development-time error checking.

Learn how React state, a component-controlled data store, powers dynamic updates. Initialize state with a constructor, bind handlers, and use setState to trigger targeted re-renders as data flows downward.

Breaks a set of pieces into a separate button component, binds handlers, and passes state and methods as props to demonstrate top-down, one-way data flow in React.

build a reusable timer component that demonstrates state in React, using setState and setInterval, with proper this binding so each component maintains its own independent timer.

Split a timer into subcomponents and keep state in the parent to support uni directional data flow. Create timer header and timer button components that communicate via props.

Learn to build a simple timer in React by managing state with isStarted, toggling between start and stop, and wiring interval logic with component lifecycle for responsive data flow.

Learn how componentWillUnmount clears intervals to prevent setState on unmounted components, and manage timers with a mounted flag and conditional rendering in React.

Enable hot reloading in the webpack dev server to preserve component state while editing, by integrating React hot loader and adjusting babel presets.

Master React event handling and state management by simulating server data with mock JSON, exporting and importing data, and rendering a names list with a reusable component.

Learn basic React event handling by adding an onClick handler to links, preventing default navigation with event.preventDefault, and handling form submit with a bound handler and inspecting the event target.

Learn to bind React events and display the triggering event to visualize user interactions, including on click, key press, change, focus, blur, and touch events.

Explore React event handling by building a responsive name filter that filters a list immutably. Manage a separate filterText state and render results based on input, using toLowerCase and includes.

Split name handling into a separate name list component and render each name. Pass first and last names via props and assign a key for each item.

Explore how to build stateless functional components that access and style nested children with props.children, enabling flexible composition and inline styling in a single-page app.

Build a single-page app with React Router, configure browser history, and render nested routes for timer and name list within a persistent header and footer.

Learn how to support direct URLs with React Router by enabling history API fallback or hash history, so refreshing or manually entering routes loads index.html and renders the correct view.

Create and export a page not found component and wire it to a wildcard route in the router, preserving the header, footer, and styling for unmatched paths.

Create a front page home component that loads by default with an index route in React Router. Explore routing options and add navigation to the home and timer sections.

Learn to build a clickable name list that routes to individual profiles using React Router, expanding mock data with city and catchphrase to enrich each profile.

Explore implementing nested routes in React Router, using id parameters to render a name profile inside a names list, and fix pathing and imports for proper bundle loading.

Learn to navigate user profiles with React Router by linking names to /names/:id, matching ids in a names array with find, and rendering the first name from the matched profile.

Learn how to implement redirects in react router using browser history push and component lifecycle, including redirecting old paths to new ones and handling data-driven redirects.

Wrap route parameters in brackets to make them optional and set up redirects in React routes, so navigating to /users or /users/1 redirects to names or configured pages.

Build a name profile with react router, navigate using browser history back, and conditionally render user data from mock data (name, email, city, catch phrase) with simple error handling.

Explore customizing the React Router back button by using a click handler to push a target path or replacing it with a link to /names, ensuring predictable navigation.

Learn how to switch active classes in React Router using activeClassName and index links, and apply external CSS to highlight the current route.

Explore inline styling in React using the style prop and style objects, compare with active classes and external stylesheets, and choose the best approach for your project.

Refactor the app header into a reusable nav component, extract navigation logic, and use react router nav links with props, children, and a spread operator to streamline active class handling.

Refactor your react app by extracting header and footer into separate components, organizing them in their own folders, and importing them into the layout for a cleaner, modular structure.

Refactor a React app by moving nameless and timer components into dedicated folders, streamline layout, and consolidate imports to improve maintainability and ensure the app runs smoothly.

Build a React products component and product list, using faker to generate 25 fake products and render them on the /products page.

Map over products to render a card-like grid in React, showing id, name, material, color, and price, with links to each item's page, while installing faker.

Build React product components by rendering a product row, mapping over products, and passing name, color, material, and price as props; set up routing to a product profile.

Create a shared products module to generate and export mock data, import it into the product profile, and load it on mount to render and link to individual product pages.

Move fields from the product row to the product profile, keeping only name and price. Add a description and placeholder content via faker in the profile.

Reuse a product profile component on the home page, load a full profile, and generate links to /products/{id} by randomizing ids from 1 to 25 with a price.

Learn to set up a basic site layout with a pure csx css framework, build a responsive top navigation bar and product grid, and enable mobile readiness without jquery.

Learn to implement responsive grids with pure CSX, enabling mobile-first layouts, media breakpoints, and grid classes like pure G for organizing names and products with resizable thumbnails.

Learn to implement modular CSS in React with component-specific CSS modules and webpack configuration using style-loader and css-loader for locally scoped classes that avoid global conflicts.

Explore React CSS styling concepts in this practical lesson, showing how to configure CSS modules with CSX, manage style injection in development, and implement camelCase naming for scalable components.

Create a header csx file, import modular styles, build a full-width nav with flexbox, push links right with margin-left auto, and style an active class in orange.

Build a product detail page in react by importing styles, adding a background image, and using flexbox to align a header and divider elements.

Improve a React product list by applying CSS styling, margins, and grid layout, add hover scale effects, remove bullets, and move styles into an external style sheet.

Refine the name list styling by removing the blue background, reducing font size to 1.25, and adding a 20-pixel margin for a cleaner layout.

Format a product profile page with React CSS and the Pure CSS framework, aligning image and text, adding margins, resizing the image, and enabling responsive layouts.

Extract css from the inlined csx into a separate stylesheet using the extract text plugin in webpack, enabling production builds, while development keeps style tags for hot reloading.

Learn how to extract css into a separate file in a webpack setup, adjust production build settings, and manage plugins while ensuring css is still injected and applied.

Explore redux as a predictable state container that centralizes the app state in a single immutable state tree, updated only by dispatched actions that return a new state object.

Discover how Redux reducers use pure functions to update state without side effects, comparing pure and impure functions and creating new state via cloning with Object.assign or spread.

Explore how redux reducers manage state by taking initial state and actions, using action.type or switch cases to update in stock or out of stock, returning the next state.

Learn array prototype immutability techniques to prevent mutating the original data by cloning arrays with concat, and using map, filter, and reduce in redux-style reducers to transform state.

Learn to implement redux basics by creating a store and a reducer. Dispatch actions to add or remove names and maintain a single source of truth with read-only state.

Continue exploring Redux store by dispatching actions with payloads such as type, name, and id; keep reducers pure while adding and removing users and checking state with getState.

Learn how to use redux to subscribe to state changes, create a store with a number reducer, dispatch increment and decrement actions, and render the updated value using get state.

Wire up button clicks to a redux-like store by dispatching increments and observe state updates, then subscribe to store changes to auto render, mirroring React.

Learn how to manage a complex app state with a single Redux store by combining reducers into a single state tree, using combineReducers, createStore, and dispatching actions.

Learn how to transition a React app to Redux by building a name reducer, creating a store, wiring a React-Redux provider, and connecting a container component to manage name list.

Explore rendering with props, destructuring, and mapping a names array in a Redux-style setup, and simulate a slow server using setTimeout to dispatch to the store.

Learn to connect a React app to redux using mapStateToProps and mapDispatchToProps. Manage a names list with a filter and update the store through dispatching actions and reducers.

Connect Redux to a React app by mapping state and dispatch to props and filtering names array with a filter text. Implement case-insensitive filtering using includes and refine input handling.

Learn to implement delete functionality in a Redux-based name list by adding a delete_name reducer case, dispatching the id, and updating state with a filtered array.

Learn how to implement the object spread operator with Babel and the transform object rest spread plugin, configure a babelrc, and update webpack for simplified state updates.