Let's add some basic JSX to our App component. Underneath <h1>Hello React</h1> add a "paragraph" element with some text describing this app:

const App = () => {
  return (
      <h1>Hello React</h1>
      <p>
        Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
        to keep a record of either because I like them, dislike them, or would like to find out.
      </p>
  )
}

You'll see some squiggling red lines in your VSCode editor with the error JSX expressions must have one parent element. React components must return a single element, although this element can then contain as many sub-elements as we want. To fix this error, wrap our two elements in main tags.

const App = () => {
  return (
    <main>
      <h1>Hello React</h1>
      <p>
        Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
        to keep a record of either because I like them, dislike them, or would like to find out.
      </p>
    </main>
  )
}

The <main></main> React element turns into a main <main></main> in HTML. React supports many of the different standard HTML tags such as <h1> and <main>. These are called semantic tags because they describe the content that they are holding. It is important to use semantic tags wherever possible for various reasons such as allowing screen readers to interpret your webpage for visually impaired users, for search engines like Google to evaluate you web page and also to make your code more readable.

Semantic tags are also used in this project by the pre-made stylesheets. If you look into the src/styles/App.css stylesheet you'll see there are css styles applied to main, header, nav and many other tags. You don't need to touch these styles in these tutorials but if you want your project to appear as it does in the examples shown in this tutorial then make sure to use the same tags as shown in these tutorials' example code.

We now have a main element in our app. Let's also add a header element to show our app's title and logo.

import './styles/App.css'
import logo from './assets/logo512.png'

const App = () => {
  return (
    <>
      <header>
        <nav>
          Food
          <img src={logo} alt="logo" />
          Places
        </nav>
      </header>
      <main>
        <h1>Hello React</h1>
        <p>
          Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
          to keep a record of either because I like them, dislike them, or would like to find out.
        </p>
      </main>
    </>
  )
}

Notice that we wrap our header and main elements with <> and </>. These are called React Fragments; they provide a workaround to the limitation that React components can only return one React element.

The new header element is intended to be a container for introductory content and navigational links. Our src/App.css stylesheet gives it a bisque background colour. It contains a nav element which centers the title text "Food Places" and a logo in the middle. Be sure to import the logo from ./assets/logo512.png so we can render the logo in the img element.

This app is going to display a list of restaurants, cafes and other food places that you want to record. Next we will make a card that shows a food place. Directly underneath your </p> element add a <div> with some semantic tags and info about a restaurant in the following format:

import './styles/App.css'
import logo from './assets/logo512.png'

const App = () => {
  return (
    <>
      <header>
        <nav>
          Food
          <img src={logo} alt="logo" />
          Places
        </nav>
      </header>
      <main>
        <h1>My List</h1>
        <p>
          Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
          to keep a record of either because I like them, dislike them, or would like to find out.
        </p>
        <div>
          <h3>Machiavelli Ristorante Italiano</h3>
          <h4>Pizza · Pasta</h4>
          <h4>123 Clarence St, Sydney NSW 2000</h4>
          <h4>
            <a href="https://www.machiavelli.com.au" target="blank">
              machiavelli.com.au
            </a>
          </h4>
          <p>Authentic Italian restaurant serving a traditional Neapolitan cuisine. The Linguine Gamberi was good value but a little bland in flavour.</p>
        </div>
      </main>
    </>
  )
}

export default App

We have added some <h3>, <h4>, <p> and a elements. The <a> tag defines a hyperlink, and you can use its href attribute to specific a website to redirect to when you click the tag. target="blank" makes the link open in a new tab, and the copy of the link shown between the opening <a> and closing </a> tags is just the text which you click to go to the link.

To make this restaurant information look more like a card, import the src/styles/Card.css stylesheet.

import './styles/App.css'
import logo from './assets/logo512.png'
import './styles/Card.css'

This stylesheet contains styles for a card class. Let's give this class to the <div> that holds our restaurant information

const App = () => {
  return (
    <>
      <header>
        <nav>
          Food
          <img src={logo} alt="logo" />
          Places
        </nav>
      </header>
      <main>
        <h1>My List</h1>
        <p>
          Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
          to keep a record of either because I like them, dislike them, or would like to find out.
        </p>
        <div className="card">
          <h3>Machiavelli Ristorante Italiano</h3>
          <h4>Pizza · Pasta</h4>
          <h4>123 Clarence St, Sydney NSW 2000</h4>
          <h4>
            <a href="https://www.machiavelli.com.au" target="blank">
              machiavelli.com.au
            </a>
          </h4>
          <p>Authentic Italian restaurant serving a traditional Neapolitan cuisine. The Linguine Gamberi was good value but a little bland in flavour.</p>
        </div>
      </main>
    </>
  )
}

In React, elements set css class names using the className attribute. Setting <div className="card"> gives the div all the styles specified in the stylesheet for the "card" class.

The src/styles/Card.css stylesheet also contains the classes metricsContainer, ratingContainer and visitsContainer. We can use these to display our rating and number of visits for the restaurant.

const App = () => {
  return (
    <>
      <header>
        <nav>
          Food
          <img src={logo} alt="logo" />
          Places
        </nav>
      </header>
      <main>
        <h1>My List</h1>
        <p>
          Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
          to keep a record of either because I like them, dislike them, or would like to find out.
        </p>
        <div className="card">
          <h3>Machiavelli Ristorante Italiano</h3>
          <h4>Pizza · Pasta</h4>
          <h4>123 Clarence St, Sydney NSW 2000</h4>
          <h4>
            <a href="https://www.machiavelli.com.au" target="blank">
              www.machiavelli.com.au
            </a>
          </h4>
          <p>Authentic Italian restaurant serving a traditional Neapolitan cuisine. The Linguine Gamberi was good value but a little bland in flavour.</p>
          <div className="metricsContainer">
            <div className="ratingContainer">Rated 4/5 stars</div>
            <div className="visitsContainer">Visited 3 times</div>
          </div>
        </div>
      </main>
    </>
  )
}

Instead of writing "Rated 4/5 stars" lets actually display 4 stars. Import the src/assets/star.svg icon like this:

import './styles/App.css'
import logo from './assets/logo512.png'
import './styles/Card.css'
import { ReactComponent as Star } from './assets/star.svg'

This allows us to place the svg icon in our code like a component. <Star />. We can even add a class to the component: <Star className="starIcon" />. We'll add the "starIcon" class which is included in src/styles/Card.css to make our stars the correct colour and size.

const App = () => {
  return (
    <>
      <header>
        <nav>
          Food
          <img src={logo} alt="logo" />
          Places
        </nav>
      </header>
      <main>
        <h1>My List</h1>
        <p>
          Here is a list of all the restaurants, cafes, dessert bars and other eateries that I want
          to keep a record of either because I like them, dislike them, or would like to find out.
        </p>
        <div className="card">
          <h3>Machiavelli Ristorante Italiano</h3>
          <h4>Pizza · Pasta</h4>
          <h4>123 Clarence St, Sydney NSW 2000</h4>
          <h4>
            <a href="https://www.machiavelli.com.au" target="blank">
              www.machiavelli.com.au
            </a>
          </h4>
          <p>Authentic Italian restaurant serving a traditional Neapolitan cuisine. The Linguine Gamberi was good value but a little bland in flavour.</p>
          <div className="metricsContainer">
            <div className="ratingContainer">
              Rating 4/5
              <Star className="starIcon" />
              <Star className="starIcon" />
              <Star className="starIcon" />
              <Star className="starIcon" />
            </div>
            <div className="visitsContainer">Visited 3 times</div>
          </div>
        </div>
      </main>
    </>
  )
}

Currently we have effectively "hard-coded" the restaurant information into our app. We want to be able to dynamically store and change this information. We will learn how to do this in the next tutorial.