Intermediate Coders: Use JavaScript to Make Web Apps and Art

learn practical react fundamentals, keep components simple and small, use functional components, manage state with props or move the state up to a parent, and debug with browser console errors.

Create a simple React app by rendering content into a root div, enable JSX, and build reusable components—class components and stateless functional components—using props to pass data.

Learn the core of building web apps with React: components, GSX/JSX syntax, React Router for single-page apps, ES6 features, Webpack bundling, modular CSS, Redux state management, debugging, and plain JavaScript.

Pin webpack and webpack dev server to version 1 to align with the course setup, and verify dependencies in package.json to prevent breaking changes and ensure consistent development.

Learn to set up React on your machine, install essential packages like React, React DOM, Webpack, and Babel, configure bundling, and transpile ES6 code for web apps.

Learn to invoke JavaScript functions within a web app, define a name mapper function, map data with keys, and return results using direct function calls and dev tools feedback.

Learn how to apply inline styles in React with a style object, setting background color and font size, and compare inline styles to separate CSS files.

Explore how the virtual DOM in React updates only changed parts of the DOM to boost performance. Compare function components and class components, and see rendering with ReactDOM.render using props.

Explore ES6 class components in React, using render, state, and a name mapper to produce JSX elements. Set up a webpack dev server with content base public to enable reload.

Learn to structure a React app by splitting logic into components, organizing files in a components folder, and exporting and importing them for a simple main app with live reload.

Split the welcome component into its own file, import it, and pass data via props to demonstrate how React components nest and share data top-down.

Learn how to validate props in React components using PropTypes, default props, and custom validators to ensure correct types, required fields, and safe defaults.

Explore how state works in React by building a stateful layout component, initializing with constructor, updating via setState, and observing downward data flow and efficient re-renders with the virtual DOM.

extract the button into its own component and pass state and change handlers as props, illustrating React's unidirectional data flow from parent to child.

Reuse a timer component to show how each instance keeps its own state, with a constructor and bound methods, updating time via setInterval and setState on click to start.

Split a timer into subcomponents and place state in the parent, using uni-directional data flow and props to drive header and button components, with the timer starting on mount.

Demonstrate componentWillUnmount to clear an active setInterval, preventing setState on an unmounted React component. Show conditional rendering of timers based on isTimerMounted and discuss mounting lifecycle.

Enable hot loading in the webpack dev server with a react hot loader, so only updated components reload and preserve their state during edits.

Explore how React handles events and prevents default behavior, while learning to mock data, pass it via props, and render a name list by mapping over data with keys.

Explore simple event handling in JavaScript and React, turning anchors into links with on click and preventing default behavior. Learn binding this, handling form submissions, and inspecting event targets.

Explore how web apps capture and display values by binding event listeners to JavaScript events—from change, focus, blur, and key press to touch—updating state on the fly in React.

Use input events to filter a names list without mutating the original data, by maintaining a filter text state. The lecture covers case-insensitive matching, filtering, and immutable data practices.

Learn to split a function into components by creating a name list and a name row, mapping over names to render each with props and keys, and choosing component types.

Learn to build a single-page app with React Router, install and configure routes, use browser history, and implement nested routes with a persistent header and footer.

Explains client-side routing challenges with direct URLs, and how to enable history API fallback or hash history in webpack dev server to load index.html and render routes like /timer.

Create a front page component named home and wire an index route to load it by default on page load, using a layout with header, footer, and navigation links.

Make name profiles by turning a name list into clickable entries that open a detailed user profile, with fields like location, city, and catch phrase.

Learn to implement nested routes in a JavaScript web app by using path parameters (id) to render a name profile from a names list, and fix root-relative loading.

Link user profiles by matching IDs to names with simple JavaScript and react router links, and render navigable profile links.

Explore how React Router handles redirects with browser history push, conditional redirects on data loads, and path mapping from users to names with parameter support.

Learn how to make route parameters optional by wrapping them in brackets, enabling redirects to names when a parameter is missing, such as users or users/1.

Build a name profile and enable back navigation with the browser history and history API. Render user data conditionally (name, email, city, catchphrase) and handle missing users gracefully.

Explore customizing back navigation in a web app by using a click handler with browser history push or replacing a button with a link to named routes like /names.

Learn to switch the active class in React navigation with activeClassName to highlight the current link. The lesson links an external CSS file and uses index link for conditional activation.

Explore inline styles in React by using a style object to mimic the active class, and compare inline styling with external stylesheets, noting advantages and disadvantages of each approach.

Refactor your app by extracting the navigation into a reusable NavList component, wiring it with props, children, and the spread operator, to support dynamic links and an active class name.

Refactor a React app by extracting a header into its own component and adding a dedicated footer for cleaner imports and modular structure.

Refactor to improve code organization by moving components into dedicated folders (name list, timer, home, 404) and updating imports, ensuring the app remains functional.

Create a web store page by building a product list and details components, generate 25 fake products with faker in the browser, and wire a /products route.

Install faker with npm and import it to generate data in the project. Map the products array into card-like divs with keys, displaying name, price, color, and description.

Build a product row and a product profile component in react, passing props for name, color, material, and price, and set up routing to /products and /products/:productId.

Move the products array into a shared module and export it as default, then initialize state with these products to render a product profile by id using react-router links.

Add images to a web app by integrating the product profile, embedding image sources, and generating placeholder content with faker, including optional inline styling.

Reuse the product profile component across home and product pages by passing an id prop, randomizing selections from the product data, and linking to individual product routes.

Explore using a basic css framework to create a responsive navigation bar and product details with a lightweight grid delivered via CDN and styled with pure css classes.

Use pure CSSA as a grid system to organize information into responsive grids, adjusting to screen size with media break points, and automatically resizing images via the pure image class.

Write modular CSS in React by scoping styles to components with CSS modules. Configure webpack with style-loader and css-loader, import component CSS, and apply local hashed class names.

Explore CSSA styling in a component-based workflow, creating a CSSA file, injecting and importing styles, and applying name classes with backgrounds; enable camelCase in the loader and adjust the config.

Add a menu to the navigation bar by building a full-width header, styling with modular CSS, and aligning links with flexbox while managing the active state for clarity.

Create a styled background for a product section by importing styles, adding a container div, and applying center, no-repeat, and cover settings with a responsive height.

Apply margins and styling to the product list, set explicit width and height, center text, remove bullets, add a border, and implement a hover scale with a short transition.

Style the name list by removing the blue background, adjusting font size, and adding margins and borders using the name-list styles.

Format the product profile page by placing the image beside the text and adjusting margins, using the pure cssa framework for a responsive layout.

Extract CSSA styles into a separate stylesheet with webpack's extract text plugin, outputting styles.cssa and linking it for production while keeping hot reload in development.

Extract css to a separate file and keep the plugin ready for future use, then verify the app runs in the web pack production setup while css styles remain injected.