React - First Component

Goal

Build a tiny component and render it to the page.

Component Basics

A component is a function that returns JSX:

function Greeting(props){
  return <h3>Hello, {props.name}!</h3>;
}

Try it

function Greeting({ name }){
  return <h3>Hello, {name}!</h3>;
}
function App(){
  return (
    <div>
      <Greeting name="World" />
      <Greeting name="React" />
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('try-first'));
root.render(<App />);

Syntax primer (for newcomers)

• function Greeting({ name }) { ... }: Function component with parameter destructuring.
• <Greeting name="World" />: JSX self-closing tag with a prop named name.
• {name}: Curly braces embed JavaScript expressions inside JSX.

Beginner notes

• Component names must start with a capital letter (e.g., Greeting).
• Return exactly one root element. Use fragments <>...</> when needed.

Vocabulary

• Component: A function that returns JSX.
• Prop: An input to a component (like attributes in HTML).

Exercises

1. Add a new prop, like mood, and display it.
2. Create a Button component that renders a styled button.