installation/setup

96 notes in this subject, read out of this brain and free to use. This is page 1 of 2.

Import createRoot from react-dom/client

Import createRoot from 'react-dom/client' to render React components. Use document.getElementById to find an HTML element with a specific id attribute, pass it to createRoot, and call root.render() with your React component to render inside that element.

React Native integration with existing native apps

React Native can be integrated into existing native mobile apps incrementally. For existing Android apps written in Java or Kotlin, or iOS apps written in Objective-C or Swift, follow the React Native integration guide to add a React Native screen.

Gradual React adoption strategy

When adopting React in an existing project, start with small interactive components like buttons, then gradually move upwards until the entire page is built with React. After reaching that point, consider migrating to a React framework to get the most out of React.

Example: rendering React in existing HTML page

To render React components in specific places in an existing HTML page: ```html  <nav id="navigation"></nav> ``` ```js // In your JavaScript file import { createRoot } from 'react-dom/client'; function NavigationBar() { return <h1>Hello from React!</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />); ``` This example shows how to preserve existing HTML content while rendering React components in specific locations marked with id attributes.

Node.js required for local development

Node.js is required for local development with React. Although you can try React online or with a simple HTML page, most JavaScript tooling for development requires Node.js.

Add React to entire subroute approach

To add React to an entire subroute of an existing website: (1) Build the React part using a React-based framework, (2) Specify the base path in your framework's configuration (like /some-app for example.com/some-app/), (3) Configure your server or proxy so that all requests under the base path are handled by your React app.

React frameworks can serve static exports

Many React-based frameworks let you run JavaScript on the server, but you can use the same approach even if you cannot or do not want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export instead (for example, next export output for Next.js or default for Gatsby).

Two-step approach to add React to existing page

To render interactive React components on an existing page: (1) Set up a JavaScript environment that lets you use JSX syntax, split code into modules with import/export, and use packages from npm, (2) Render your React components where you want to see them on the page.

Check if app already uses import statements

If your app is already split into files that use import statements, try to use the setup you already have. Check whether writing JSX syntax like <div /> in your JS code causes a syntax error. If it does, you may need to transform your JavaScript code with Babel and enable the Babel React preset to use JSX.

Use Vite for new modular JavaScript setup

If your app does not have an existing setup for compiling JavaScript modules, set it up with Vite. The Vite community maintains integrations with backend frameworks including Rails, Django, and Laravel. If your backend framework is not listed, follow the Vite backend integration guide to manually integrate Vite builds with your backend.

Install React and React DOM packages

To check whether your setup works, run 'npm install react react-dom' in your project folder.

Build tool installation: Parcel command

To install Parcel as a build tool, run: npm install --save-dev parcel

Build tool installation: Vite command

To create a new React TypeScript app with Vite, run: npm create vite@latest my-app -- --template react-ts

Build tool installation: Rsbuild command

To create a new React app with Rsbuild, run: npx create-rsbuild --template react

Vite features and capabilities

Vite is a build tool that comes with sensible defaults out of the box and has a rich ecosystem of plugins supporting fast refresh, JSX, Babel/SWC, and other common features. Vite includes a React plugin and React SWC plugin, and has an SSR example project available. Vite is used as the build tool in React Router, one of the recommended frameworks.

Parcel features and capabilities

Parcel combines an out-of-the-box development experience with a scalable architecture suitable for projects from initial stages to massive production applications. Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box.

Rsbuild features and capabilities

Rsbuild is an Rspack-powered build tool for React applications with carefully tuned defaults and performance optimizations. It includes built-in support for fast refresh, JSX, TypeScript, and styling.

Metro for React Native

Metro is the JavaScript bundler for React Native. It supports bundling for platforms like iOS and Android but lacks many features compared to Vite, Parcel, or Rsbuild. Metro should be used only when your project requires React Native support.

Build tools start with client-only SPA

Vite, Parcel, and Rsbuild all start off with a client-only, single-page app (SPA) architecture but do not include built-in solutions for routing, data fetching, or styling.

Tradeoffs of building from scratch

Building a React app from scratch means solving framework-like problems that established frameworks already have well developed solutions for. As requirements evolve, you may need to implement server-side rendering (SSR), static site generation (SSG), React Server Components (RSC), and other framework-level features on your own. Building from scratch also makes it more difficult to get support since development patterns are unique to your situation.

Performance benefits of frameworks

Established React frameworks help build better performing apps. For example, reducing or eliminating waterfalls from network requests improves user experience. Framework-level optimizations may not be a high priority for toy projects but become important as an app gains users.

Next.js maintains App Router

Next.js's App Router is a React framework maintained by Vercel that takes full advantage of React's architecture to enable full-stack React apps. It can be deployed to any hosting provider that supports Node.js or Docker containers, to your own server, or as a static export without requiring a server.

Build React app from scratch alternative

If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can build a React app from scratch. This requires making choices on which tools to use for routing, data fetching, and other common usage patterns. You can start with a build tool like Vite, Parcel, or RSbuild.

Expo creates native mobile and web apps

Expo is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs. It provides an SDK for React Native. Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions.

React Router is a routing library for full-stack apps

React Router is the most popular routing library for React and can be paired with Vite to create a full-stack React framework. It emphasizes standard Web APIs and is maintained by Shopify.

Start new React app with a framework

When building a new app or website with React, the recommended approach is to start with a framework rather than building from scratch.

Next.js App Router setup command

To create a new Next.js App Router project, run: npx create-next-app@latest

React Router v7 setup command

To create a new React Router framework project, run: npx create-react-router@latest

Expo setup command

To create a new Expo project, run: npx create-expo-app@latest

React frameworks support multiple rendering strategies

Recommended React frameworks support client-side rendering (CSR), single-page apps (SPA), and static-site generation (SSG). These apps can be deployed to a CDN or static hosting service without a server. Additionally, frameworks allow adding server-side rendering on a per-route basis when needed, enabling you to start with a client-only app and opt-in to server features later without rewriting your app.

Enable format on save in VS Code

To enable formatting on every save in VS Code: press Ctrl/Cmd+Shift+P, type 'settings', hit Enter, type 'format on save' in the search bar, and tick the 'format on save' option.

VS Code is a popular React editor

VS Code is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most recommended editor features can be added to VS Code as extensions, making it highly configurable.

Other popular React editors

Other popular text editors used in the React community include: WebStorm, an integrated development environment designed specifically for JavaScript; Sublime Text, which has support for JSX and TypeScript, syntax highlighting and autocomplete built in; and Vim, a highly configurable text editor included as 'vi' with most UNIX systems and Apple OS X.

ESLint for code linting

ESLint is a popular, open source linter for JavaScript that finds problems in your code as you write, helping you fix them early. Install ESLint with the recommended configuration for React using the eslint-config-react-app package. Integrate ESLint in VS Code with the official extension. Enable all eslint-plugin-react-hooks rules for your project as they are essential and catch the most severe bugs early. The eslint-config-react-app preset already includes them.

Prettier for code formatting

Prettier automatically reformats code to conform to preset, configurable rules, handling tabs vs spaces, indentation, quotes, and other formatting consistently. In the ideal setup, Prettier runs when you save your file. You can install the Prettier extension in VS Code by launching VS Code, using Quick Open (Ctrl/Cmd+P), pasting in 'ext install esbenp.prettier-vscode', and pressing Enter.

Avoid ESLint and Prettier formatting conflicts

If your ESLint preset has formatting rules, they may conflict with Prettier. Disable all formatting rules in your ESLint preset using eslint-config-prettier so that ESLint is only used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use 'prettier --check' for your continuous integration.

Root component file definition

A root component file is the main component file in a React application, typically named App.js. Depending on your setup, the root component could be in another file. If you use a framework with file-based routing like Next.js, your root component will be different for every page.

Online sandboxes supporting React

Several online sandboxes support React experimentation outside of the React documentation: CodeSandbox (https://codesandbox.io/s/new), StackBlitz (https://stackblitz.com/fork/react), and CodePen (https://codepen.io/pen?template=QWYVwWN).

Try React without installation

You don't need to install anything to play with React. You can edit React code directly in interactive sandboxes available in the React documentation.

Options for starting a React project

You have three main options to get started with React: create a new React app using a recommended framework, build a React app from scratch to learn the basics, or add React to an existing project.

Try React locally with HTML file

You can try React locally on your computer by downloading an HTML file, opening it in your editor and in your browser.

Create React App is deprecated

Create React App has been deprecated as of February 2025. For new React projects, use a recommended framework instead.

React supports gradual adoption

React has been designed from the start for gradual adoption. You can use as little or as much React as you need, whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app.

React Compiler has installation and configuration steps

React Compiler requires installation and configuration with your build tools before use.

React Compiler supports incremental adoption

React Compiler can be gradually adopted in existing codebases if you are not ready to enable it everywhere at once, with specific strategies available for incremental adoption.

React Compiler Rsbuild setup

For Rsbuild integration, refer to Rsbuild's documentation at https://rsbuild.dev/guide/framework/react#react-compiler to enable and use React Compiler.

ESLint plugin for React Compiler

Install the ESLint plugin using npm install -D eslint-plugin-react-hooks@latest. The compiler rules are available in the recommended-latest preset. The ESLint rule identifies violations of the Rules of React, shows which components can't be optimized, and provides helpful error messages for fixing issues.

Opt out of React Compiler with 'use no memo'

To opt out a specific component from React Compiler optimization, use the 'use no memo' directive at the top of the component function. This tells the compiler to skip optimization for that specific component while continuing to optimize other parts of the codebase.

React Compiler build output verification

You can verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic, such as imports from react/compiler-runtime with the _c function and symbol checks for react.memo_cache_sentinel.

Verify React Compiler with DevTools

To verify React Compiler is working, install the React Developer Tools browser extension, open your app in development mode, and look for the 'Memo ✨' badge next to component names in React DevTools. Components optimized by React Compiler will show this badge.

React Compiler installation command

Install React Compiler as a devDependency using npm install -D babel-plugin-react-compiler@latest, or with Yarn using yarn add -D babel-plugin-react-compiler@latest, or with pnpm using pnpm install -D babel-plugin-react-compiler@latest.

React Compiler version compatibility

React Compiler is designed to work best with React 19, but it also supports React 17 and 18.

React Compiler Babel plugin ordering

React Compiler must run first in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations.

React Compiler Babel configuration

To configure React Compiler with Babel, create or update babel.config.js with 'babel-plugin-react-compiler' listed first in the plugins array before other plugins.

React Compiler Vite setup with @vitejs/plugin-react 6.0.0

For Vite 6.0.0 or later with @vitejs/plugin-react, import reactCompilerPreset from @vitejs/plugin-react and use it in a Babel plugin configuration with @rolldown/plugin-babel. The inline Babel option was removed in @vitejs/plugin-react@6.0.0.

React Compiler Next.js setup

For Next.js integration, refer to the Next.js documentation at https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler for setup instructions.

React Compiler React Router Vite setup

Install vite-plugin-babel and configure it with babel-plugin-react-compiler in the Babel plugins array. Use the filter option /\.[jt]sx?$/ to target JavaScript and TypeScript files.

React Compiler Webpack community loader

A community webpack loader for React Compiler is available at https://github.com/SukkaW/react-compiler-webpack.

React Compiler Expo setup

For Expo apps, refer to Expo's documentation at https://docs.expo.dev/guides/react-compiler/ to enable and use React Compiler.

React Compiler React Native Metro setup

React Native uses Babel via Metro. For React Compiler setup with React Native, follow the Babel configuration section.

Give your agent this brain