$devvkit learn --librarie react-guide

React Guide

[ui][frontend][components]

JavaScript / TypeScript

Install

npx create-next-app@latest my-app --typescript

React is the most widely used UI library. Describe what the UI should look like as a function of state.

React 19 introduces the use() hook for promises, server components, and improved hydration.

React re-renders the component tree when state changes but only commits minimal DOM mutations.

Components & JSX

Function component— Component with TS props.

interface Props { name: string }
export function Greeting({ name }: Props) { return <div>Hello, {name}</div>; }

Conditional render— Show/hide elements.

return (
  <div>
    {isLoading ? <Spinner /> : <Data />}
    {error && <ErrorBanner />}
  </div>
);

List rendering— Render arrays.

return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;

Hooks

useState— Add local state.

const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;

useEffect— Run side effects.

useEffect(() => { fetch('/api/users').then(r => r.json()).then(setUsers); }, []);

useRef— Persist mutable value.

const inputRef = useRef<HTMLInputElement>(null);
inputRef.current?.focus();

Custom hook— Encapsulate logic.

function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });
  useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [key, value]);
  return [value, setValue] as const;
}

State Management

useReducer— Complex state logic.

function reducer(state: {count:number}, action: {type:string}) {
  switch(action.type) {
    case 'inc': return {count: state.count+1};
    default: return state;
  }
}
const [state, dispatch] = useReducer(reducer, {count: 0});

Context API— Share state without prop drilling.

const Theme = createContext('light');
function App() { return <Theme.Provider value="dark"><Toolbar /></Theme.Provider>; }

Performance

useMemo— Memoize computation.

const sorted = useMemo(() => users.sort((a,b) => a.name.localeCompare(b.name)), [users]);

Forms

Controlled input— Form input with state.

const [value, setValue] = useState('');
return <input value={value} onChange={e => setValue(e.target.value)} />;

Testing

RTL test— Test with Testing Library.

import { render, screen, fireEvent } from '@testing-library/react';
it('increments', () => {
  render(<Counter />);
  fireEvent.click(screen.getByText('0'));
  expect(screen.getByText('1')).toBeInTheDocument();
});