Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 5 · 1 / 9Components and JSX
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Components and JSX
01 / 09Overview

Components and JSX

You'll learn to read and write a React component, a function that returns JSX.

Why it mattersEvery screen in React and React Native is built from components, so this is the first thing you read in any React file.
about 90 min·needs: Functions in, values out, Common HTML elements, Modules and npm
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Video
React in 100 secondsYouTube · Fireship · 2 min · English
MMamun's noteA fast picture of what React is. Watch it all, don't worry about every word. You will learn each part slowly in this phase.
Docs
Your first componentreact.dev · official docs · 15 min · English
MMamun's noteRead all of it and edit the live examples. Notice the capital letter rule and the export default line.
Docs
Writing markup with JSXreact.dev · official docs · 15 min · English
MMamun's noteRead "The rules of JSX" carefully. These three rules explain most beginner errors in JSX.
DocsOptional
Vite: getting startedVite docs (official) · 5 min · English
MMamun's noteRead "Scaffolding your first Vite project" only. Run npm create vite@latest, pick React and JavaScript, and you have a project to play in.
03 / 09

Explanation

You want a page with ten cricket score cards. Writing the same HTML ten times is slow, and a change means ten edits. Instead you write the card once, give it a name, and use it as many times as you like. That named, reusable piece of screen is called a component.

In React, a component is a function that returns what the screen should show. The returned part looks like HTML, but it lives inside JavaScript. It is called JSX.

function ScoreCard() {
  const runs = 245;
  return <p>Bangladesh: {runs} runs</p>;
}

The { } inside JSX is a window back into JavaScript. {runs} shows the value of runs, so the screen says "Bangladesh: 245 runs". You can put any value there, like {runs + 4}.

You use a component like a tag: <ScoreCard />. React calls the function and puts what it returns on the screen. This is called rendering.

A few JSX rules you will meet every day:

  • Return one outer element. Wrap siblings in a <div> or an empty <>...</>.
  • Write className, not class, because class is a JavaScript word.
  • Close every tag, even <img /> and <br />.

People often name a component with a small letter. <scoreCard /> is treated as an unknown HTML tag, and nothing of yours shows. Component names always start with a capital letter.

Real projects are started with Vite: run npm create vite@latest and pick React. Old tutorials use create-react-app; it is no longer recommended, so skip that part of any video.

When you read a component, look at what it returns, then find every { } and ask: what value goes here?

Words to recognise
componentJSXrenderclassNameexport defaultVite
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

App.jsx5 notes
function ScoreCard() {
Mentor note · line 1
A component is a normal function. Its name starts with a capital letter.
2 const team = "Bangladesh";
3 const runs = 245;
return (
<div className="card">
<h2>{team}</h2>
7 <p>Runs: {runs}</p>
8 </div>
9 );
10}
11
12export default function App() {
return <ScoreCard />;
14}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1function Greeting() {
2  const name = "Nusrat";
3  return <h1>Hello, {name}!</h1>;
4}
5 
6export default function App() {
7  return (
8    <div>
9      <Greeting />
10      <Greeting />
11    </div>
12  );
13}
What appears on screen?
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3With const runs = 245;, what does <p>Runs: {runs + 5}</p> show?
  2. 2 / 3Why must a component name start with a capital letter?
  3. 3 / 3How do you give a JSX element the CSS class card?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Components and JSX?

09 / 09

Done

You can now
Read a component and say what it puts on the screen, including the values inside { }.
Next: Props Back to Phase 5
On this page
  1. 01Components and JSX
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Components and JSX
01 / 09Overview

Components and JSX

You'll learn to read and write a React component, a function that returns JSX.

Why it mattersEvery screen in React and React Native is built from components, so this is the first thing you read in any React file.
about 90 min·needs: Functions in, values out, Common HTML elements, Modules and npm
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Video
React in 100 secondsYouTube · Fireship · 2 min · English
MMamun's noteA fast picture of what React is. Watch it all, don't worry about every word. You will learn each part slowly in this phase.
Docs
Your first componentreact.dev · official docs · 15 min · English
MMamun's noteRead all of it and edit the live examples. Notice the capital letter rule and the export default line.
Docs
Writing markup with JSXreact.dev · official docs · 15 min · English
MMamun's noteRead "The rules of JSX" carefully. These three rules explain most beginner errors in JSX.
DocsOptional
Vite: getting startedVite docs (official) · 5 min · English
MMamun's noteRead "Scaffolding your first Vite project" only. Run npm create vite@latest, pick React and JavaScript, and you have a project to play in.
03 / 09

Explanation

You want a page with ten cricket score cards. Writing the same HTML ten times is slow, and a change means ten edits. Instead you write the card once, give it a name, and use it as many times as you like. That named, reusable piece of screen is called a component.

In React, a component is a function that returns what the screen should show. The returned part looks like HTML, but it lives inside JavaScript. It is called JSX.

function ScoreCard() {
  const runs = 245;
  return <p>Bangladesh: {runs} runs</p>;
}

The { } inside JSX is a window back into JavaScript. {runs} shows the value of runs, so the screen says "Bangladesh: 245 runs". You can put any value there, like {runs + 4}.

You use a component like a tag: <ScoreCard />. React calls the function and puts what it returns on the screen. This is called rendering.

A few JSX rules you will meet every day:

  • Return one outer element. Wrap siblings in a <div> or an empty <>...</>.
  • Write className, not class, because class is a JavaScript word.
  • Close every tag, even <img /> and <br />.

People often name a component with a small letter. <scoreCard /> is treated as an unknown HTML tag, and nothing of yours shows. Component names always start with a capital letter.

Real projects are started with Vite: run npm create vite@latest and pick React. Old tutorials use create-react-app; it is no longer recommended, so skip that part of any video.

When you read a component, look at what it returns, then find every { } and ask: what value goes here?

Words to recognise
componentJSXrenderclassNameexport defaultVite
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

App.jsx5 notes
function ScoreCard() {
Mentor note · line 1
A component is a normal function. Its name starts with a capital letter.
2 const team = "Bangladesh";
3 const runs = 245;
return (
<div className="card">
<h2>{team}</h2>
7 <p>Runs: {runs}</p>
8 </div>
9 );
10}
11
12export default function App() {
return <ScoreCard />;
14}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1function Greeting() {
2  const name = "Nusrat";
3  return <h1>Hello, {name}!</h1>;
4}
5 
6export default function App() {
7  return (
8    <div>
9      <Greeting />
10      <Greeting />
11    </div>
12  );
13}
What appears on screen?
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3With const runs = 245;, what does <p>Runs: {runs + 5}</p> show?
  2. 2 / 3Why must a component name start with a capital letter?
  3. 3 / 3How do you give a JSX element the CSS class card?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Components and JSX?

09 / 09

Done

You can now
Read a component and say what it puts on the screen, including the values inside { }.
Next: Props Back to Phase 5
On this page
  1. 01Components and JSX
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want a page with ten cricket score cards. Writing the same HTML ten times is slow, and a change means ten edits. Instead you write the card once, give it a name, and use it as many times as you like. That named, reusable piece of screen is called a component.

In React, a component is a function that returns what the screen should show. The returned part looks like HTML, but it lives inside JavaScript. It is called JSX.

function ScoreCard() {
  const runs = 245;
  return <p>Bangladesh: {runs} runs</p>;
}

The { } inside JSX is a window back into JavaScript. {runs} shows the value of runs, so the screen says "Bangladesh: 245 runs". You can put any value there, like {runs + 4}.

You use a component like a tag: <ScoreCard />. React calls the function and puts what it returns on the screen. This is called rendering.

A few JSX rules you will meet every day:

  • Return one outer element. Wrap siblings in a <div> or an empty <>...</>.
  • Write className, not class, because class is a JavaScript word.
  • Close every tag, even <img /> and <br />.

People often name a component with a small letter. <scoreCard /> is treated as an unknown HTML tag, and nothing of yours shows. Component names always start with a capital letter.

Real projects are started with Vite: run npm create vite@latest and pick React. Old tutorials use create-react-app; it is no longer recommended, so skip that part of any video.

When you read a component, look at what it returns, then find every { } and ask: what value goes here?

Words to recognise
componentJSXrenderclassNameexport defaultVite

You want a page with ten cricket score cards. Writing the same HTML ten times is slow, and a change means ten edits. Instead you write the card once, give it a name, and use it as many times as you like. That named, reusable piece of screen is called a component.

In React, a component is a function that returns what the screen should show. The returned part looks like HTML, but it lives inside JavaScript. It is called JSX.

function ScoreCard() {
  const runs = 245;
  return <p>Bangladesh: {runs} runs</p>;
}

The { } inside JSX is a window back into JavaScript. {runs} shows the value of runs, so the screen says "Bangladesh: 245 runs". You can put any value there, like {runs + 4}.

You use a component like a tag: <ScoreCard />. React calls the function and puts what it returns on the screen. This is called rendering.

A few JSX rules you will meet every day:

  • Return one outer element. Wrap siblings in a <div> or an empty <>...</>.
  • Write className, not class, because class is a JavaScript word.
  • Close every tag, even <img /> and <br />.

People often name a component with a small letter. <scoreCard /> is treated as an unknown HTML tag, and nothing of yours shows. Component names always start with a capital letter.

Real projects are started with Vite: run npm create vite@latest and pick React. Old tutorials use create-react-app; it is no longer recommended, so skip that part of any video.

When you read a component, look at what it returns, then find every { } and ask: what value goes here?

Words to recognise
componentJSXrenderclassNameexport defaultVite