Your First React Component

React · 3 minute lesson

React organizes interfaces into components. A component is a function that describes a piece of the screen using JSX. Start with a small, recognizable unit such as a lesson card, then combine several components to form a page.

Component names begin with a capital letter. In JSX, lowercase names refer to built-in browser elements such as article and h2, while a capitalized name identifies your own component. Return one enclosing element, or use a Fragment when an extra wrapper would serve no purpose.

Keep the first version simple: a heading, a sentence, and a link are enough. Once the markup is clear, move repeated pieces into separate components. JSX belongs in a React development environment with the appropriate tooling; pasting JSX into an ordinary browser script will not make the browser compile it.

Try the example

function LessonCard() {
  return (
    <article className="lesson-card">
      <h2>JavaScript foundations</h2>
      <p>Learn variables and functions.</p>
      <a href="/javascript-basics">Start learning</a>
    </article>
  );
}

export default LessonCard;

Practice

Create a LessonCard in a React project and render it twice on a page. Change the heading style in one CSS rule. Notice how both instances follow the same component structure and styling.

Continue learning: Official documentation.