06. Band Tour |
A New Way to JavaScript
Let's dig into exactly how React code is written.
let header = <header>Compiler Coffee ☕</header>;
This is JSX. It looks like a mashup of HTML and JavaScript!
Sometimes referred to as "JavaScript Syntax Extension", parts of JSX are disguised as HTML. When you run a React app, the HTML-like parts are transpiled into browser-readable JavaScript!
With JSX, you can write the HTML tags you know and love such as <header>, <div>, or <p>.
JSX can also be written as a function that returns markup:
function addHeading() {
return (
<div>
<header>Compiler Coffee ☕</header>
<p>Our coffee is home brewed!</p>
</div>
)
}
We can see the power of React as we use a function to return our website's markup!
JSX is only valid if everything is wrapped under a single element:
// Incorrect
return (
<h1>The Outsiders</h1>
<p>by S.E. Hinton</p>
)
// Correct
return (
<div>
<h1>The Outsiders</h1>
<p>by S.E. Hinton</p>
</div>
)
As you progress through this chapter, you will start to realize how powerful writing with JSX is when building websites.
Instructions
Your friend's band is going on tour and they'd like your help with their website.
Let's create some JSX and a list of tour stops!
First, replace the comment with a <div> element inside the return statement.
Inside the <div>, write a <h1> that reads "Tour Stops".
Then, paste the following below the heading:
<ul>
<li>🇺🇸 New York City, US - Madison Square Garden</li>
<li>🇬🇧 London, UK - Wembley Stadium</li>
<li>🇩🇪 Munich, DE - Zenith Halle</li>
<li>🇯🇵 Tokyo, JP - Budokan</li>
<li>🇦🇺 Melbourne, AU - The Forum</li>
</ul>
Afterward, turn to the output window on the right. This heading and list should be displayed.
Help
Want the solution? Try completing the lesson first!
Codédex Bot
- What are classes and objects in Python?
- How to create a table in HTML?
- What's if (variable > 2) print(‘greater’)?
- What's Codédex Club?
Rubber Duck
First React App
JSX & Components
06. Band Tour
07. Embedded JS
08. Travel Gallery
09. Hot Takes Pt. 1
10. Hot Takes Pt. 2
Props & State
Events
Checkpoint Project
Forms
Hooks
Data Fetching
Routing
06. Band Tour
15 XP
06. Band Tour |
A New Way to JavaScript
Let's dig into exactly how React code is written.
let header = <header>Compiler Coffee ☕</header>;
This is JSX. It looks like a mashup of HTML and JavaScript!
Sometimes referred to as "JavaScript Syntax Extension", parts of JSX are disguised as HTML. When you run a React app, the HTML-like parts are transpiled into browser-readable JavaScript!
With JSX, you can write the HTML tags you know and love such as <header>, <div>, or <p>.
JSX can also be written as a function that returns markup:
function addHeading() {
return (
<div>
<header>Compiler Coffee ☕</header>
<p>Our coffee is home brewed!</p>
</div>
)
}
We can see the power of React as we use a function to return our website's markup!
JSX is only valid if everything is wrapped under a single element:
// Incorrect
return (
<h1>The Outsiders</h1>
<p>by S.E. Hinton</p>
)
// Correct
return (
<div>
<h1>The Outsiders</h1>
<p>by S.E. Hinton</p>
</div>
)
As you progress through this chapter, you will start to realize how powerful writing with JSX is when building websites.
Instructions
Your friend's band is going on tour and they'd like your help with their website.
Let's create some JSX and a list of tour stops!
First, replace the comment with a <div> element inside the return statement.
Inside the <div>, write a <h1> that reads "Tour Stops".
Then, paste the following below the heading:
<ul>
<li>🇺🇸 New York City, US - Madison Square Garden</li>
<li>🇬🇧 London, UK - Wembley Stadium</li>
<li>🇩🇪 Munich, DE - Zenith Halle</li>
<li>🇯🇵 Tokyo, JP - Budokan</li>
<li>🇦🇺 Melbourne, AU - The Forum</li>
</ul>
Afterward, turn to the output window on the right. This heading and list should be displayed.