Summary - JSX basics

Combine JSX expressions, attributes and styles to write a welcome card.

Summary - JSX basics

In this group you learned what JSX is, how to embed JavaScript expressions in curly braces, and how attributes are written in JSX. Now it's time to put it together.

The flow is: define a function, return JSX inside it, put dynamic values in curly braces, and write camelCase attributes such as className and htmlFor. Finally, export the component with export default.

In the next step you'll combine these in a single component.

Exercise Welcome card

Complete the skeleton. Write a component called Welcome that returns <section className="welcome"> with <h1>Hello</h1> and <p>Welcome to React</p> inside. Don't forget to export.

Show example solution

function Welcome() {
  return (
    <section className="welcome">
      <h1>Hello</h1>
      <p>Welcome to React</p>
    </section>
  );
}

export default Welcome;

Test yourself

What goes inside curly braces?
- An HTML tag
- A CSS rule
- A comment
- A JavaScript expression
Show answer

A JavaScript expression — Curly braces hold a JavaScript expression.
Match the flow steps

function

Define
return

Return
className

Class
export default

Export

Next lesson: Component logic

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies