// Блок
<div></div> 
<View></View>

// Изображение
<img src="https://domain.com/static/my-image.png" />
<Image source={{ uri: "https://domain.com/static/my-image.png" }} />

// Текст
<p>Hello</p>
<Text>Hello</Text>

// Список
array.map(item => <span>>{item.name}</span>)

<FlatList
  data={posts}
  renderItem={({ item }) => (
    <Text>{item.name}</Text>
  )}
/>

export function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.greeting}>Set Reminder</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 24,
  },
  greeting: {
    fontSize: 24
  },
});

import { renderToMarkup } from 'react-html';
import EmailTemplate from './my-email-template-component.js'

async function action(email, name) {
  "use server";
  // ... in your server, e.g. a Server Action...
  const htmlString = await renderToMarkup(<EmailTemplate name={name} />);
  // ... send e-mail using some e-mail provider
  await sendEmail({ to: email, contentType: 'text/html', body: htmlString });
} 

import { getPosts } from "@/data";

export async function GET() {
  const posts = await getPosts();
  return Response.json(posts);
}

"use client";

import { Posts } from "@/posts";
import { useQuery } from "@tanstack/react-query";

const fetchPosts = async () => {
  const response = await fetch("/api/posts");
  return await response.json();
};

const Page = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["posts-route-handler"],
    queryFn: fetchPosts,
  });

  /* --snip-- */
}

"use client";

import { getPosts } from "@/data";
import { Posts } from "@/posts";
import { useQuery } from "@tanstack/react-query";

const fetchPosts = async () => {
  return await getPosts();
};

const Page = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["posts-server-action"],
    queryFn: fetchPosts,
  });

  /* --snip-- */
}

// 1
const NavigationMenu = () => {
  return (
    <ul>
      <li>
        <a href="/about">
          <img src="question-icon.png" />
          About
        </a>
      </li>
      <li>
        <a href="/contact">
          <img src="person-icon.png" />
          Contact
        </a>
      </li>
      <li>
        <a href="/buy">
          <img src="cash-icon.png" />
          Buy
        </a>
      </li>
      // ...
    </ul>
  )
}

// 2
const NavigationMenu = () => {
  const items = [
    makeNavItem("/about", "question-icon.png", "About"),
    makeNavItem("/contact", "person-icon.png", "Contact"),
    makeNavItem("/buy", "cash-icon.png", "Buy"),
    // ...
  ]

  return (
    <ul>
      {items.map((item) => (
        <li>
          <a href={item.url}>
            <img src={item.icon} />
            {label}
          </a>
        </li>
      ))}
    </ul>
  )
}

import DOMPurify from 'dompurify';

const comment = '<script>alert("XSS Attack!")</script>Great article!';

const UserComments = () => {
  return (
    <div>
      <li dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(comment) }} />
    </div>
  );
}; 

header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://maps.googleapis.com https://www.googletagmanager.com;" 

function CSRFProtectedForm() {
  const [csrfToken, setCsrfToken] = useState('');

  {/* Запрос CSRF токена */}

  return (
    <form onSubmit={submitForm}>
      <input type="hidden" name="_csrf" value={csrfToken} />
      {/* --snip-- */}
      <button type="submit">Submit</button>
    </form>
  );
}

function JoinButton({ children }: { children: React.ReactNode }) {
    const { pending, data } = useFormStatus()

    return (
        <button type="submit">
            {pending ? `Joining as ${data.get('username')}...` : children}
        </button>
    )
}

function JoinEventForm() {
    /** --snip */
    return (
        <form action={joinEvent}>
            <JoinButton>Join</JoinButton>
        </form>
    )
}

async function joinEvent(
    previousState: { joined: boolean },
    formData: FormData,
) {
    /** --snip */ 

    return { joined: true }
}

function JoinEventForm() {
    const [state, formAction, isPending] = useActionState(
        joinEvent,
        { joined: false },
        JOIN_URL,
    )

    return (
        <div>
            {state.joined ? (
                <p>See you there!</p>
            ) : (
                <form action={formAction}>
                    <button type="submit">
                        {isPending ? 'Joining...' : 'Join'}
                    </button>
                </form>
            )}
        </div>
    )
}

<p>There are 4 lights!</p> 

// После перевода: 

<p><font>Er zijn 4 lampen!</font></p>

import { Component as Arrow } from './icon.svg?svgUse';

return <Arrow color="red" />;

<svg viewBox="0 0 24 24">
  <use
    href="https://my-site.com/assets/icon-someHash.svg#use-href-target"
    style="--svg-use-href-color: red"
  ></use>
</svg>

<svg
  xmlns="https://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="var(--svg-use-href-color, #111)"
  id="use-href-target"
>
  <line x1="5" y1="12" x2="19" y2="12"></line>
  <polyline points="12 5 19 12 12 19"></polyline>
</svg>

function Card() {}

Card.Header = function Header() {}
Card.Body = function Body() {}
Card.Footer = function Footer() {}

export default Card;

export default Object.assign(Card, {
  Header,
  Body,
  Footer,
});

// card.tsx
export function CardRoot() {}
export function CardHeader() {}
export function CardBody() {}
export function CardFooter() {}

// namespaces.ts
export {
    CardBody as Body,
    CardRoot as Root,
    CardFooter as Footer,
    CardHeader as Header,
} from "./card";

// index.tsx
export * as Card from "./namespace";

// App.tsx
import { Card } from './src/ui/card';

// Card.Root, Card.Body и т.д.

import { useForm } from '@tanstack/react-form';

export default function App() {
  const form = useForm({
    defaultValues: {
      firstName: '',
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value);
    },
  });

  return (
    <div>
      <h1>Simple Form Example</h1>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          form.handleSubmit();
        }}
      >
        <div>
          <form.Field
            name="firstName"
            validators={{
              onChangeAsyncDebounceMs: 500,
              onChangeAsync: async ({ value }) => {
                await new Promise((resolve) => setTimeout(resolve, 1000));

                return (
                  value.includes('error') && 'No "error" allowed in first name'
                );
              },
            }}
            children={(field) => {
              return (
                <>
                  <label htmlFor={field.name}>First Name:</label>
                  <input
                    id={field.name}
                    name={field.name}
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                  />
                </>
              );
            }}
          />
        </div>
        <form.Subscribe
          selector={(state) => [state.canSubmit, state.isSubmitting]}
          children={([canSubmit, isSubmitting]) => (
            <button type="submit" disabled={!canSubmit}>
              {isSubmitting ? '...' : 'Submit'}
            </button>
          )}
        />
      </form>
    </div>
  );
}

import { ComponentType } from 'react'

type ProductTileProps = {
  title: string
  description?: string
}

type Props = {
  render: ComponentType<ProductTileProps>
}

function ProductTile({ render }: Props) {
  const props = {…}

  return render(props)
}

import { RefObject } from 'react'

type Props = {
  anchor: RefObject<HTMLElement>
}

function Popover({ anchor }: Props) {
  // position component according to the anchor ref
}