De Angular para React

type GreetingProps = {
  name: string;
};

export function Greeting({ name }: GreetingProps) {
  return (
    <h1 className="title">
      Olá, {name}
    </h1>
  );
}

type CardProps = {
  title: string;
  onClose?: () => void;
  children: React.ReactNode;
};

export function Card({
  title, onClose, children
}: CardProps) {
  return (
    <div className="card">
      <header>
        <h2>{title}</h2>
        {onClose && (
          <button onClick={onClose}>
            X
          </button>
        )}
      </header>
      {children}
    </div>
  );
}

// uso:
<Card
  title="Fatura"
  onClose={() => console.log('fechou')}>
  <p>Total: R$ 200</p>
</Card>

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);

  // <>...</> = Fragment: agrupa múltiplos
  // elementos sem criar wrapper no DOM.
  return (
    <>
      <p>Valor: {count}</p>
      <button onClick={() =>
        setCount(c => c + 1)
      }>+1</button>
    </>
  );
}

// Estado é IMUTÁVEL. Crie novo:
// setUser(prev => ({...prev, age: 31}))

import { useState, useEffect } from 'react';

export function Search({
  query
}: { query: string }) {
  const [results, setResults] =
    useState<Item[]>([]);

  // ngOnInit + ngOnChanges + ngOnDestroy
  // tudo num bloco só:
  useEffect(() => {
    let cancelled = false;

    fetch(`/api?q=${query}`)
      .then(r => r.json())
      .then(data => {
        if (!cancelled) setResults(data);
      });

    // cleanup (= ngOnDestroy)
    return () => { cancelled = true; };
  }, [query]); // roda quando query muda

  // ...
}

// useRef: referência ao DOM
const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus();
}, []);

return <input ref={inputRef} />;

// useMemo: valor derivado memoizado
const [count, setCount] = useState(0);
const double = useMemo(
  () => count * 2, [count]
);

// React.memo: equivalente a OnPush
const ExpensiveChild = React.memo(
  ({ data }: { data: Item[] }) => {
    return <List items={data} />;
  }
);
// só re-renderiza se data (shallow) mudar

{/* Condicional */}
{isLogged
  ? <p>Bem-vindo, {user.name}</p>
  : <p>Faça login</p>
}

{/* Lista. Key é obrigatório */}
{items.map(item => (
  <Row key={item.id} data={item} />
))}

{/* Função pura em vez de pipe */}
<p>{formatDate(birthday)}</p>

{/* Class condicional (lib clsx) */}
<div className={clsx({
  'active': isActive,
  'error': hasError,
})}></div>

type AuthCtx = {
  user: User | null;
  login: (u: User) => void;
  logout: () => void;
};

const AuthContext =
  createContext<AuthCtx | null>(null);

export function AuthProvider({
  children
}: { children: React.ReactNode }) {
  const [user, setUser] =
    useState<User | null>(null);

  const value = useMemo(() => ({
    user,
    login: (u: User) => setUser(u),
    logout: () => setUser(null),
  }), [user]);

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

// Custom hook pra consumir:
export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('fora do Provider');
  return ctx;
}

// Uso no componente:
const { user, logout } = useAuth();

function useWindowWidth(delay = 200) {
  // initializer LAZY (não roda em SSR)
  const [width, setWidth] = useState(() =>
    typeof window !== 'undefined'
      ? window.innerWidth : 0
  );

  useEffect(() => {
    let timer: ReturnType<typeof setTimeout>;

    const handle = () => {
      clearTimeout(timer);
      timer = setTimeout(
        () => setWidth(window.innerWidth),
        delay
      );
    };

    window.addEventListener('resize', handle);
    return () => {
      clearTimeout(timer);
      window.removeEventListener('resize', handle);
    };
  }, [delay]);

  return width;
}

// uso direto no componente:
const width = useWindowWidth();

import { useForm } from 'react-hook-form';
import { zodResolver } from
  '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Email inválido'),
  password: z.string()
    .min(8, 'Mínimo 8 chars'),
});

type Form = z.infer<typeof schema>;

export function LoginForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<Form>({
    resolver: zodResolver(schema)
  });

  return (
    <form onSubmit={handleSubmit(
      data => auth.login(data)
    )}>
      <input {...register('email')} />
      {errors.email &&
        <span>{errors.email.message}</span>}
      <input type="password"
        {...register('password')} />
      <button disabled={isSubmitting}>
        Entrar
      </button>
    </form>
  );
}

// router.tsx
const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { index: true, element: <Home /> },
      {
        path: 'users/:id',
        element: <UserDetail />,
        loader: async ({ params }) =>
          fetch(`/api/users/${params.id}`),
      },
      {
        path: 'admin',
        lazy: () =>
          import('./admin/Admin')
            .then(m => ({ Component: m.default })),
      },
    ],
  },
]);

// componentes usam hooks:
const { id } = useParams();
<Link to="/users/42">User</Link>
<Outlet /> // = router-outlet

// custom hook
function useUser(id: string) {
  return useQuery({
    queryKey: ['user', id],
    queryFn: () =>
      fetch(`/api/users/${id}`)
        .then(r => r.json()),
    staleTime: 60_000, // 1min
  });
}

// componente
const { data, isLoading, error } =
  useUser(id);

if (isLoading) return <Spinner />;
if (error) return <Error />;
return <div>{data.name}</div>;

// Cache, refetch on focus, retry,
// devtools. Tudo incluído.

// createSlice = actions + reducer juntos
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    inc: (state) => {
      state.value += 1; // Immer: "mutação"
    },
    set: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { inc, set } =
  counterSlice.actions;

// componente
const count = useSelector(
  (s: RootState) => s.counter.value
);
const dispatch = useDispatch();
dispatch(inc());

// app/users/[id]/page.tsx
// Server Component (DEFAULT no App Router)
// Roda SÓ no servidor. Zero JS DO COMPONENTE
// no bundle (vai um payload serializado).

type Props = {
  params: { id: string }
};

export default async function UserPage({
  params
}: Props) {
  // await direto no corpo. Sem hook.
  const user = await fetch(
    `${process.env.API}/users/${params.id}`,
    { next: { revalidate: 60 } }
  ).then(r => r.json());

  return (
    <>
      <h1>{user.name}</h1>
      <EditButton userId={user.id} />
    </>
  );
}

// EditButton.tsx (precisa de interatividade)
'use client';
export function EditButton({ userId }: ...) {
  const [open, setOpen] = useState(false);
  // ...
}