🧩 Component-Based Architecture

Pre-ReactJS embraces a component-based architecture, allowing you to build your UI using plain HTML and JavaScript without the need for compiled JSX. This approach leverages inline HTML, providing a straightforward and efficient way to create components without sacrificing functionality.

For an enhanced development experience, consider installing the VS Code Extension (opens in a new tab), which supports inline HTML and improves your workflow.

Understanding How it works

In your newly created project, you'll find a Pages/ directory. This directory is where you store all the HTML code for your website, organized as JavaScript files. Here’s how it works:

HTML stored in session storage: When a user visits your site, the HTML for all pages from this Pages/ directory is stored in the client browser's session storage.
Faster Page Transitions: As the HTML structure is stored for all the pages no need for network calls for the page update, the corresponding CSS and logic files are dynamically loaded and unloaded.

We'll start by building our components and editing Home.js to gain a stronger understanding. Note that Home.js is the entry point for your application, so avoid deleting or renaming it.

Creating Your First Component

Start by creating some files in the components folder as :

Step 1 : create `components/MessageBox/messageBox.js`

Paste the following. This creates a component with props/arguments::

/* components/MessageBox/messageBox.js */
const MessageBox = ({title, message}) =>{
return(
    /*html*/`
<link rel="stylesheet" href="./components/MessageBox/messageBox.css">
<span id="message-box">
    <h1>${title}</h1>
    <p>${message}</p>
</span>
`)
}
export default MessageBox

Step 2 : create `components/MessageBox/messageBox.css`

Paste the following. Adds style to your component::

/* components/MessageBox/messageBox.css */
 
#message-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 20px auto;
}
 
#message-box h1 {
    font-size: 24px;
    color: #333;
    margin: 0 0 10px;
}
 
#message-box p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

Step 3 : change the `Pages/Home.js` to have ::

calls your component on the user screen.

 
//use inline html vs code extension to write html like these in template strings. Don't forget write /*html*/ or /*css*/
//before template string after installing inline html extention.
import messageBox from "../components/MessageBox/messageBox.js"
const Home = /*html*/ `
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}
</style>
 
<h1 class="poppins-medium">Example using component based architecture,Showcasing code reusability</h1>
<div id="wrapper">
    <div>${messageBox({title:"Hello👋",message:"pre-reactJS"})}</div>
    <div>${messageBox({title:"Hello👋",message:"Arpit"})}</div>
    <div>${messageBox({title:"Hello👋",message:"Howdy!"})}</div>
</div>
 
`;
export default Home;

Observation:

In the changes we did earlier we have acheived what is called component based architecture, what that means is that you write one component or peice of frontend code and reuse it any number of times, with n degree of customising options according to your liking.

We also looked how to use css in our components and our pages. Try playing around the messageBox component and the Home page.

Quick Start Logic