Components
What are components?
1. Definition
a. Components are independent and reusable bits of code.
b. They serve the same purpose as JavaScript functions but work in
isolation and return HT ML or JSX .
2. Reactjs allows us to create our website modular by using something called
as
a. Separation of concern
To create a User Interface
1. HTML
a. index.html
Code structure for project
2. CSS
a. styles.css
Apply style to structure of the project
3. JS
a. script.js
Provide functionality.
b. In reactjs, we can split this entire project into
a. Multiple Components * Parts
In there we will put html,css , javascript inside their spec ific file
Components 1
b. Create components for
a. Navbar
b. Search bar
c. Menu
d. Article
e. Card
We will reuse card again and again
Syntax for Component
1. To create a component we just have to write a JavaScript function.
2. Keep in mind while creating component
a. First letter of component name should be Capital
b. Creating component either using function keyword or arrow syntax
Components 2
c. Anytime we are working with the component
We need to return some sort of html from that component.
Create First Component
1. Components are just JavaScript functions.
2. Open App.jsx file
a. Create Component
Function keyword
function App(){
return <h1>Hello, WOrld</h1>
Components 3
Arrow Function
const App = ()=>{
return <h1>Hello, WOrld</h1>
b. Export App component
export default App
We are exporting out component so that we can it in our other parts
of code.
3. Where we are using our component?
a. Go inside main.jsx file
b. Inside main.jsx file we imported App component
import App from './App';
c. Rendering the App component to our User Interface.
By selecting the div by using getElementById(ˮrootˮ)
ReactDOM.createRoot(document.getElementById('roo
t')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
In index.html, inside div with id=root we are rendering our app
component.
Components 4
d. We are now selecting that root which is inside index.html file
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></scrip
t>
</body>
Components Challenges
1. Break Down the UI into ComponentsTake a look at the provided UI. Your
task is to divide it into multiple React components. You don't need to write
any code for this step. Simply use a pen and paper or a photo editing tool
to visualize how the UI can be split into different components. This exercise
will help you get a better understanding of component structure in React.
Components 5
2. Create a Greet Component
Create a new file called Greet.jsx and inside that file, write
a Greet component using the function declaration syntax.
function Greet(){
return <h1>Hello Priyanka</h1>
}
export default Greet
Afterward, refactor the Greet component to use the arrow
function syntax.
const Greet = ()=>{
return <h1>Hello, Priyanka</h1>
}
export default Greet
Finally, register the Greet component in your App.jsx file so that you
ca n see the result when running the app.
import Greet from "./Greet"
function App(){
return <Greet/>
export default App
React Extension
Components 6
1.
Lot of snippets.
2. Boilerplate of Component
rafce
import React from 'react'
const Greet = () => {
return (
<div>
</div>
)
}
export default Greet
Multiple Components
1. Create Component Folder inside src Folder
a. Greet.jsx
import React from 'react'
const Greet = () => {
return (
<div>
Greeting Content
Components 7
</div>
)
}
export default Greet
b. Add.jsx
import React from 'react'
const Add = () => {
return (
<div>
Add Component
</div>
)
}
export default Add
c. App.jsx
import Greet from "./components/Greet.jsx";
import Add from "./components/Add.jsx"
import React from 'react'
const App = () => {
return (
<div>
<Greet/>
<Add/>
</div>
)
}
Components 8
export default AppSS
Multiple Components Challenge
Exercise: Rendering Multiple Components and Nesting Components
In this exercise, you will learn how to create multiple components and render
one component inside another.
Step 1: Create a Header Component
1. Create a new file called Header.jsx .
2. Inside this file, create a functional component named Header .
3. The Header component should return a <header> element with the following:
A <h1> element with the text "Welcome to My Website!"
A <nav> element containing three links ( <a> ) with the
text "Home" , "About" , and "Contact" .
const Header = ()=>{
return <div>
<h1>Welcome to My Website!</h1>
<nav>
<a href="">Home</a>
<a href="">About</a>
<a href="">Contact</a>
</nav>
</div>
}
Components 9
export default Header
Step 2: Create a Footer Component
1. Create a new file called Footer.jsx .
2. Inside this file, create a functional component named Footer .
3. The Footer component should return a <footer> element with
a <p> containing the text "© 2024 My Website" .
const Footer = ()=>{
return <div>
<p>© 2024 My Website</p>
</div>
}
export default Footer
Step 3: Create a MainContent Component
1. Create a new file called MainContent.jsx .
2. Inside this file, create a functional component named MainContent .
3. The MainContent component should return a <main> element containing:
A <h2> element with the text "Main Content" .
A <p> element with any text of your choice.
const MainContent = ()=>{
return <div>
<h2>Main Content</h2>
<p>Welcome Priyanka!</p>
</div>
}
Components 10
export default MainContent
Step 4: Render Components Inside App.jsx
1. In your App.jsx file, import the Header , MainContent , and Footer components:
import Header from "./Header";
import MainContent from "./MainContent";
import Footer from "./Footer";
const App = () => {
return (
<div>
<Header/>
<MainContent/>
<Footer/>
</div>
)
}
export default App
2. Inside the App component's return statement, render the three components
inside a single <div> , in the following order:
Header
MainContent
Footer
Your App.jsx should look like this:
function App() {
return (
<div>
<Header />
Components 11
<MainContent />
<Footer />
</div>
);
}
export default App;
Output
Components 12
