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.
![](https://imgur.com/zhliLIG.png)
You can see the final HTML markup of your app by opening the inspector in your
browser with Ctrl + Shift + c
(Windows) or Cmd + Shift + c
(MacOS).
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.
![](https://imgur.com/WOuRwsP.png)
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.
![](https://imgur.com/DDG7Ibz.png)
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.
![](https://imgur.com/KTgQAVX.png)
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>
</>
)
}
![](https://imgur.com/uMQWB2K.png)
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 children.