React and Typescript: Build a Portfolio Project

Learn how TypeScript and React work together by building simple parent and child components, passing props, and exploring state and event handlers with named versus default exports.

Discover how TypeScript strengthens React props by defining an interface inside the child component to specify required props, enabling checks in both parent and child, with a string color prop.

Learn to define React function components with TypeScript using the FC pattern and explicit props, revealing component properties like display name and default props.

Explore annotating React props with TypeScript by adding an onClick callback to child components and handling children with React.FC versus manual interfaces.

Create a small React and TypeScript app that uses state to manage a guest list, with a controlled input and add button, illustrating TypeScript annotations and React components.

Manage a name input and a guests array in React with TypeScript, using type inference and explicit string[] typing to add guests on click and clear the input.

Map over the guests array to render a list of elements with keys, displaying each guest's name in a React component, as a quick finish to the example.

Build a type-safe user search component in React and TypeScript that uses useState to capture input, search a hardcoded user list, and display a found user or not found message.

Learn to use TypeScript unions in React state by finding a user with array find, storing a user object with name and age or undefined, and conditionally rendering details.

Explore inline versus separate onChange callbacks by building a dedicated event component in React and TypeScript, log events, and confront the any type error as you refactor.

Explore typing standalone event handlers in TypeScript, comparing inline versus pre-defined callbacks, and annotate the event object with React ChangeEvent for precise typing.

Learn to type event handlers in React with TypeScript by applying types for drag and change events, handling on drag start, and leveraging React type definitions to access event properties.

Explore using TypeScript with React class components by typing props and state, implementing a typed user search component with interfaces, state management, and event handling.

learn to create and type a ref with useRef in a function component, applying HTMLInputElement typing and null safety, and focus the input when the component renders.

Learn to use refs and useEffect to auto-focus a text input on mount in a React and TypeScript project, with type guards for input current.

Learn how to integrate Redux with TypeScript by building a small React app that searches the npm API for a package name and displays results, with a reusable project template.

Design a redux store for a React and TypeScript project by modeling a repositories slice with data, loading, and error, plus action creators and a single index.ts to export redux.

Define and implement the repositories reducer in Redux, handling search repositories, success, and error actions with loading, data from payload, and error state, in plain JavaScript for now.

Apply a return type annotation to the reducer to enforce repositories state, ensuring the data property remains an array of strings and preventing invalid types.

Improve type safety in a reducer by introducing an action interface with a required type and an optional payload, replacing any with specific types to catch property errors in TypeScript.

Define three Redux action interfaces in TypeScript: search repositories, search repositories success with a string array payload, and search repositories error with a string payload.

Annotate reducer actions with union interfaces and use type guards to narrow action types in TypeScript. Learn how switch statements reveal payloads like string arrays for search repositories actions.

Add an action type enum to centralize action type strings, enabling type-safe reducers and action creators. This reduces duplication across interfaces and improves consistency when handling search repository actions.

Set up a dedicated actions folder with an index.ts, export the action type enum, and refactor imports to support a scalable Redux store and an action creator.

Create an asynchronous action creator using Redux Thunk to search repositories via an axios API request, dispatching loading and error actions to update the UI.

Add axios get requests to search the npm registry with a text query, map data.objects to extract package.name, and dispatch a search repository success action with the names.

Type dispatch with a Redux action type to ensure the payload matches each action. Strengthen the store typing and prevent runtime errors.

Learn how to wire a redux app by creating a reducers index, configuring a store with thunk middleware, and centralizing exports for reducers, store, and action creators.

Connect the Redux store to the React app by wrapping with provider and passing the store, then introduce a repositories list component that handles text input, search, and rendering.

Initialize the reducer's state with loading false, error null, and data as an empty array, then set the repository state to initial state, save, and refresh to reveal content.

Build a searchable package list with React and TypeScript by managing input state, handling form submit with preventDefault, dispatching an action to fetch data, and rendering results from Redux.

Call an action creator from inside a React Redux component by using the use dispatch hook, importing action creators, and dispatching search repositories with the term to trigger API requests.

Create a useActions hook that binds action creators to dispatch with useDispatch and bindActionCreators, letting components call searchRepositories directly and streamline Redux actions.

Use the useSelector hook to access the Redux store and select the repositories state, including loading, error, and data, while addressing typing gaps in React Redux.

Define a RootState type to describe the Redux store shape, including a repositories key and repository state. Enable typing so the use selector can infer the store data in TypeScript.

Create a typed selector in React Redux by defining a useTypedSelector hook with the root state type, enabling typed access to data, error, and loading in your components.

Manage error, loading, and data states in a React and TypeScript app by rendering appropriate messages, a libraries list, and Redux integration.

Wraps up the Redux and TypeScript integration, explains organizing Redux code, importing from the state index, and handling type information with dispatch and the useSelector hook, plus thunk typing considerations.

Build a browser-based interactive development environment inside a CLI, with markdown and code cells, a show function, and npm imports like Axios and Bulma CSS, saving to a Bouquets file.

Identify the challenges of running user-provided code in a React app: safely executing code from a string, preprocessing JSX and imports, and loading modules and CSS in the preview.

Explore transpiling options to safely run JavaScript in the browser using Babel to convert JSX and async await. Compare in-app transpiling with a CodePen–style API that returns the transpiled code.

Explore two transpiling approaches for a React and TypeScript portfolio project: use a remote backend or run Babel directly in the browser, with in-browser results shown from code editors.

Learn how JavaScript modules work by exporting and importing values, compare CommonJS and ES modules, and explore how a bundler like Webberley links modules and handles transpilation with Babel.

Generate a new project, install webpack 5.1.1 and webpack-cli 4.30.0 with save exact, and create src/index.js and src/messages.js to observe how webpack bundles into dist/main.js.

Convert index.js and messages.js to es module syntax using export default and import. Webpack bundles commonjs and es modules into a single dist main.js and resolves imports and exports.

Describe how a bundler like webpack reads the entry file, resolves imports, and links modules, then propose changing it to fetch npm modules directly, while noting css isn’t addressed yet.

Explore three bundling options for a React app: backend webpack with npm install plugin, a custom npm-fetch plugin, or bundling inside the React client to import modules from npm.

Compare remote versus local transpiling and bundling for a React and TypeScript portfolio project. The local approach promises faster execution and simpler maintenance, while in-browser bundling challenges are explored.

Explore Esbuild as a browser-friendly replacement for Babel and Webpack, capable of transpiling and bundling user code almost instantly for in-browser execution.

Learn to use Esbuild as the transpile and bundle engine by building a tiny React app with a textarea where users write code, submit, transpile, bundle, and view the result.

Install esbuild version 0.80.27 exactly, set up a fresh src/index.tsx with a simple React app that renders hi to #root, then start the dev server on port 3000.

Build a basic React and TypeScript form: add a text area, manage input with useState, attach a submit button, and display transpiled and bundled code in a pre element.

Discover how esbuild runs in the browser with a simple JavaScript wrapper and a webassembly binary. Copy the binary into public folder so the browser can fetch it for building.

Initialize esbuild in the index.tsx file by importing esbuild wasm, starting a service with useEffect, and loading the webassembly from the public directory.

Learn to share a service across a React component by using a ref with the use ref hook in TypeScript, guarding with ref.current before esbuild transpiling and bundling onClick.

Explore how Esbuild's transform transpiles JavaScript with JSX and TypeScript using loader and target options. Note that transpiling does not bundle or resolve imports.

Investigate bundling in the browser with esbuild, explore transform versus build, and learn to intercept imports by fetching dependencies from the npm registry instead of the file system.

Explore fetching React's source as a tarball via npm view, inspecting package.json and index.js, and why browsers cannot rely on npm for dependency resolution, prompting esbuild-based bundling.

Learn how to bundle React in the browser by using unpackage as a CDN proxy to fetch the package source, bypassing cors restrictions with esbuild and a custom path-resolution plugin.

Master esbuild bundling by building a custom plugin, intercepting module paths, and inspecting the bundle output in the browser for a React and TypeScript portfolio project.

Explore how Esbuild plugins shape the bundling process, using on resolve and on load to override file discovery and loading, and compare Esbuild's efficiency to Webpack.

Explore how filters and namespaces control when on resolve and onload run by matching file names with regular expressions and applying functions to specific file namespaces.

Explore extending a plugin by replacing a hardcoded export with an npm import from a tiny test package, diagnosing esbuild load errors, and implementing onResolve and onLoad to fetch modules.

Learn to dynamically fetch remote modules with esbuild by updating on resolve and on load, using axios to fetch and serve code from unpackaged.com.

enhance the on resolve function to generate a dynamic unpackage url when importing files with a path other than index.js, using a template https://unpackage.com/${args.path} and test the naive approach.

Investigate why naive URL resolution breaks multi-file packages and learn to resolve imports relative to the importer, using Esbuild onResolve and onLoad correctly.

Explain how esbuild resolves imports via onResolve and onLoad, fetching medium test package and utils with intelligent url joining to handle dot slash and dot dot slash paths.

apply the url constructor to resolve relative paths (dot slash, dot dot slash) in imports and requires, using the importer base path to bundle the index.js and its utils.

Investigate a failing nested requires case and refine a path resolution algorithm. Distinguish main package files from internal files and track the last fetched directory for correct imports.

Learn how to detect redirects during file fetches, extract the redirected path, and use resolve dir with esbuild to correctly resolve nested package paths and bundle modules.

Learn to require real npm modules (react, react dom, axios, lodash) in a bundler workflow, test CommonJS and ESModule support, observe warnings, and plan a caching layer for performance.

Use esbuild define to replace process env node env and global with window during browser bundling, removing warnings and enabling production builds.

Learn to fetch specific package versions, like React 16.0.0, from unpackaged.com and bundle them to compare how different library versions affect your project and documentation tool.

Explore how bundling in React triggers numerous network requests to unpackage, how imports inflame them, and how caching and a custom caching layer can reduce requests.

Implement a caching layer to reduce requests to unpackage.com by caching fetched files in the browser with IndexedDB via localforage and a localStorage fallback.

Explore client-side caching with a LocalForage IndexedDB implementation. Store and retrieve with set item and get item using path or color keys.

This lecture teaches debugging a TypeScript onload error in a bundler by returning a proper esbuild onload result, using generics to type cached results and implementing a caching layer.

Refactor the bundling workflow by splitting the plugin into multiple plugins. Wire the text area input as the Esbuild entry point and prepare for CSS file support.

Refactor resolve logic by splitting on resolve calls with targeted filters to handle index.js, relative module paths, and main module files, improving clarity and future plugin modularity.

Refactor the onload logic into a new fetch plugin to improve clarity and reuse, moving file caching and fetching into a separate plugin.

Explore adding CSS support in a bundler by importing an npm CSS file, diagnosing esbuild errors from treating CSS as JavaScript, and adjusting the fetch plugin loader to CSS.

Confront an esbuild shortcoming when loading a case file with the correct loader, and learn a workaround by wrapping access file contents in JavaScript to append bassists into the DOM.

Learn a hacky workaround to trick esbuild's CSS handling by bypassing the CSS loader, injecting the CSS into a style tag appended to the head via JavaScript, with noted limitations.

Escape the css content by removing newlines and escaping quotes, insert it into a JavaScript string, and test in the browser with bulma to confirm the styles apply.

Refactor onload logic with separate filters for index.js, CSS, and JavaScript, implement caching to optimize bundle loading and reduce code duplication.

Deduplicate shared caching logic in esbuild onload handlers by extracting common cache checks, returning null to pass control, and ensuring subsequent onloads resolve CSS and other files correctly.

Switch to loading the esbuild wasm binary from unpackage instead of bundling it in public, dropping the local file and updating the build to fetch the wasm remotely.

Explore executing user code in the browser by using eval on the bundled output, address safety and security, and implement robust error handling with try/catch and setTimeout concerns.

Identify risks when running user-provided code, including crashes from errors, DOM mutations that wipe the app, and malicious scripts that steal cookies or impersonate users, and discuss mitigation strategies.

We examine how online code previews use iframes in CodePen, CodeSandbox, and JSFiddle, and consider iframe-based execution as a practical solution.

Explore the basics of iframes by embedding a separate HTML document in a React app using a test.html file and an iframe element, and review related security settings.

Explore how JavaScript runs in two contexts—parent frame and iframe—demonstrating visibility rules for window A and color, and introducing communication between contexts.

Learn how a parent and child iframe communicate, access their window objects and properties via parent or content window, and how settings can disable this cross-context linkage.

Explore how iframe sandbox settings enable or block direct access between the parent and child, including empty sandbox, allow same origin, and cross-origin access implications.

Explore how direct access between frames requires the same domain, port, and protocol; the video demonstrates localhost scenarios, cross-origin blocking, and the effects of mismatched origins on iframe communication.

Explore how iframes sandbox user code to prevent dom mutations and security risks, using sandboxed same-origin policies and cross-domain isolation as seen in CodePen, CodeSandbox, and Jsfiddle.

Trace how CodePen, CodeSandbox, and Jsfiddle implement iframe-based code execution, from code edits through transpiling to secure iframe loading of JavaScript.

Explore whether to separate the main React app and iframe content by using separate domains or ports, weighing security benefits against future hosting and authentication needs.

Learn a middle-ground approach to securely isolating iframe content by applying a sandbox attribute, avoiding extra servers, while noting limitations like blocked local storage and cookies.

Discover how to load iframe content using the srcdoc approach, avoiding extra requests, and explore sandbox vs allow-same-origin implications, including the local storage trade-off.

Showcases running bundled code inside an iframe using the srcdoc approach, with sandboxed scripts and allow-scripts to execute on load and log results.

Learn how to run unescaped code in an iframe via the src doc attribute, and diagnose syntax errors from large bundles and embedded script tags.

Learn indirect communication between a parent window and its iframe using postMessage. Implement cross-context messaging by listening for message events, posting messages, and restricting domains to protect data.

Learn to pass code to an iframe via postMessage, listen for parent messages, and execute bundled code inside the iframe. Validate integration by importing react dom and rendering components.

Learn to create a React component and render it into an iframe using React DOM, bundle in the browser, and observe a fast, client-side update process.

Wrap user code execution in a try-catch to capture runtime errors and render a clear, styled error message inside the iframe. Improve debugging of React components.

Identify why repeated code execution in an iframe leaks state and causes inner html errors; reload the iframe before each run to reset the document.

Reset the iframe contents by updating the iframe's src doc property with new HTML before executing code inside it. This ensures the iframe is rebuilt prior to bundling.

Fix two warnings in the React and Typescript portfolio project by removing an unused state, deleting the pre output, and adding a title to the iframe for code preview.