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.

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.

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 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.

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.

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.

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.

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

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

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.

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.

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 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.

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.

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.

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.

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.

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.

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

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