React Basic Syntax

Learn JSX syntax, function components, props, and rendering basics in React.

Your first component

tsx

type WelcomeProps = { name: string };

export function Welcome({ name }: WelcomeProps) {
  return <h1>Hello, {name}</h1>;
}

tsx

const title = 'React Basics';
return <h2>{title}</h2>;

tsx

function App() {
  return (
    <main>
      <Welcome name="Alex" />
    </main>
  );
}

Use fragments to avoid unnecessary wrapper nodes:

tsx

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

tsx

return <div>{/* This is a JSX comment */}</div>;

Next, we will dive deeper into JSX and rendering behavior.