Scribd
Upload
3 views3 pages

3 Compnent Example

The document explains a simple React application consisting of two components: Welcome and App. It details the purpose of each line of code, including the creation of components, returning UI, and using fragments. Additionally, it outlines the flow of execution when the App component is rendered, leading to the display of 'Hello World' in the browser.

Uploaded by

Syed Arsalan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

3 Compnent Example

The document explains a simple React application consisting of two components: Welcome and App. It details the purpose of each line of code, including the creation of components, returning UI, and using fragments. Additionally, it outlines the flow of execution when the App component is rendered, leading to the display of 'Hello World' in the browser.

Uploaded by

Syed Arsalan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

function Welcome() {

return <h1>Hello World</h1>;


}
function App() {
return (
<>
<Welcome />
</>
)
}
export default App
Now let’s understand this code line by line 👇

Line 1
function Welcome() {
Meaning:
This creates a React component.
• function → JavaScript function
• Welcome → component name
In React, component names must start with a CAPITAL letter.

Line 2
return <h1>Hello World</h1>;
Meaning:
return tells React what should be displayed on the screen.
This line means:
Show “Hello World” inside an <h1> tag.

<h1>
<h1>Hello World</h1>
This is a normal HTML tag.
Output:
Hello World

Line 3
}
Meaning:
This closes the Welcome component.

Line 4
function App() {
Meaning:
This is the main component.
A React application normally starts from the App component.
So:
• Welcome = child component
• App = main component

Line 5
return (
Meaning:
Now the App component will return the UI that should appear on the screen.

Line 6
<>
Meaning:
This is called a Fragment.
A Fragment is used to wrap multiple elements without adding an extra <div> to the HTML.
Similar to:
<div>
But it does not create extra HTML in the browser.

Line 7
<Welcome />
Meaning:
Here we are using the Welcome component.
React:
• calls the Welcome() function
• displays the returned UI on the screen
Internally React does something like this:
Welcome()
And the output becomes:
<h1>Hello World</h1>
which is shown on the screen.

Line 8
</>
Meaning:
The Fragment is closing here.

Line 9
)
The return statement is ending.
Line 10
}
The App component ends here.

Line 11
export default App
Meaning:
This line tells React:
App is the main component of this file.
React imports this component and renders it on the screen.

Full Flow Understanding


Step 1
React runs the App component.
App()

Step 2
Inside App, React finds:
<Welcome />

Step 3
React runs the Welcome() function.
function Welcome() {
return <h1>Hello World</h1>;
}

Step 4
The output becomes:
<h1>Hello World</h1>

Step 5
The browser displays:
Hello World

Easy Memory Trick


Code Meaning
function Creating a component
return Returning UI
<Welcome /> Using a component
export default App Exporting the main component

You might also like