In the previous article, we explored the process of creating a "Hello World!" React app using just a single HTML page. In this article, we will delve into the separation of our JavaScript code from our HTML page and learn how to create reusable components.
This is the code we have till now :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React BTS</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<script>
const App = () => {
return React.createElement(
"div",
{},
React.createElement("h1", {}, "Hello World!")
);
};
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));
</script>
</body>
</html>
Now, let's first move our JS code to a separate file called app.js and include it into our HTML page using a script tag -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React BTS</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<script src="./app.js"></script>
</body>
</html>
// app.js
const App = () => {
return React.createElement(
"div",
{},
React.createElement("h1", {}, "Hello World!")
);
};
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));
If we run this project now, the output will remain the same.
Let's create our first component -
// app.js
const Student = () => {
return React.createElement("div", {}, [
React.createElement("h1", {}, "John"),
React.createElement("h2", {}, "Male"),
React.createElement("h3", {}, "21"),
]);
};
const App = () => {
return React.createElement("div", {}, [
React.createElement("h1", {}, "Hello World!"),
React.createElement(Student),
]);
};
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));
Here we have created a component called Student which uses React.createElement to create a DOM structure with a parent "div" element and three child elements ("h1," "h2," and "h3"). When this component is rendered, it will produce the following HTML structure:
<div>
<h1>John</h1>
<h2>Male</h2>
<h3>21</h3>
</div>
And the output would be something like :
Now that we have a component, we can utilize it multiple times by simply calling it. :
// app.js
const Student = () => {
return React.createElement("div", {}, [
React.createElement("h1", {}, "John"),
React.createElement("h2", {}, "Male"),
React.createElement("h3", {}, "21"),
]);
};
const App = () => {
return React.createElement("div", {}, [
React.createElement("h1", {}, "Hello World!"),
React.createElement(Student),
React.createElement(Student),
]);
};
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));
And the output would be :
Here, we can see that it doesn't make any sense to use the component twice, as it gives the same output. That's because, until now, we have been using static data only. Let's make this component dynamic using props:
// app.js
const Student = (props) => {
return React.createElement("div", {}, [
React.createElement("h1", {}, props.name),
React.createElement("h2", {}, props.gender),
React.createElement("h3", {}, props.age),
]);
};
const App = () => {
return React.createElement("div", {}, [
React.createElement("h1", {}, "Hello World!"),
React.createElement(Student, { name: "John", gender: "Male", age: 21 }),
React.createElement(Student, { name: "Mary", gender: "Female", age: 20 }),
]);
};
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));
Here, we have used props to pass some dynamic data to the component, and then we are using them accordingly. Let's see the output:
As a result, we've successfully separated our JavaScript code from the HTML, created components, and gained a deeper understanding of how React operates.
Top comments (0)