Components & Functionality (day 4)
In this article:
How React application work?
index.html
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>>
In the main.JSX file, we need to import the React and ReactDOM libraries and create our React component(s) using JSX syntax. We then use the ReactDOM.render() method to render our component(s) inside the root div element in the index.html
import React from 'react'
import ReactDOM from 'react-dom';
function App() {
return (
<div>
<h1>Hello, World!</h1>
<p>This is my first React app.</p>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));;
How to create our own components?
Creating our own components is very easy, This process is like creating folders and files on our local pc and laptop. Let see how
Recommended by LinkedIn
Multiple Components:
Inside the src folder, I created two files namely NavBar. jsx and BodyPart. jsx. These files are two separate components. What we are going to do is, we are rendering these two components on the browser. Let's see what to do.
I created a functional component inside the Navbar. jsx file.
Inside the NavBar functional component, I return the <h1> element.
Finally, I export the NavBar function component.
Then the BodyPart. jsx I created a <p> element.
Now we are going to import these two components in our App. jsx component. Let's see,
From the top, I imported the two files the NavBar and BodyPart files using the import module.
Inside the App functional component, we are using the NavBar and BodyPart components. This is the way to add other components to our App component.
Practice Yourself:
That's it KIDS🤘see you in the next article.