Describing the UI in React

React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable components. From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you’ll learn to create, customize, and conditionally display React components.

Your first component 

React applications are built from isolated pieces of UI called components. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a Gallery component rendering three Profile components:

function Profile() {
 return (
  <img
   src="https://i.imgur.com/MK3eW3As.jpg"
   alt="Katherine Johnson"
  />
 );
}

export default function Gallery() {
 return (
  <section>
   <h1>Amazing scientists</h1>
   <Profile />
   <Profile />
   <Profile />
  </section>
 );
}

Writing markup with JSX 

Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information.

If we paste existing HTML markup into a React component, it won’t always work:

export default function TodoList() {
 return (
  // This doesn't quite work!
  <>
  <h1>Hedy Lamarr's Todos</h1>
  <img
   src="https://i.imgur.com/yXOvdOSs.jpg"
   alt="Hedy Lamarr"
   class="photo"
  />
  <ul>
   <li>Invent new traffic lights</li>
   <li>Rehearse a movie scene</li>
   <li>Improve spectrum technology</li>
  </ul>
  </>
   
 );
}