If you started your journey as a web developer, chances are the very first concepts you heard about were HTML and CSS. Perhaps you have already mastered these two skills and started building websites. If you have, I have good news for you: yes, these two skills are genuinely enough to build a website. But they are not sufficient.
It is possible to build any site using HTML and CSS, and the professional frameworks and libraries we will look at shortly are built on top of HTML and CSS foundations. Internet browsers can also only render HTML and CSS.
So, if you can build websites with HTML and CSS, why should we use frameworks and libraries like React, Angular, Astro, etc.?
In this article, we will look at the differences and similarities between HTML/CSS and the React library, and discuss the learning path for beginners.
Why HTML and CSS Are Not Enough?
I would recommend HTML and CSS to anyone entering Web Development. Because learning HTML/CSS and grasping their logic is much easier compared to frameworks. Building light and simple applications, like a basic To-Do app, using HTML/CSS during the learning phase is an extremely correct step.
However, for medium and large-scale projects, HTML/CSS starts to fall short. Here are the main reasons why:
Inability to Build Dynamic Websites:
While HTML/CSS makes it easy to create short presentation sites, landing pages, and web apps with simple structures, they fall short on websites where content is dynamically managed and changed using technologies like databases and APIs. On such websites, when data is entered or modified by a server or user, HTML/CSS requires the entire website to reload according to its working principle. If data updates every second, the website is forced to reload repeatedly. This is unacceptable from a user experience perspective.
Modern libraries like React run on JavaScript and work with a principle called the Virtual DOM. The Virtual DOM copies and stores all elements of the site (the DOM). If a change occurs in a part of the site, React compares the Real DOM with the Virtual DOM, and if they differ, only the modified part is updated in the Virtual DOM. Thanks to this, instead of replacing the entire site, only the changed element is updated. This allows dynamic processes to execute seamlessly without the user even noticing.
Inability to Connect with Servers:
Websites written with HTML/CSS lack the ability to use databases and APIs. Not using a database means not being able to store user data, which leads to the site being unable to be truly interactive.
Lack of a Component System:
When building a footer, navbar, or button in these types of websites, you have to copy and paste the code to reuse these elements in another section of the site. This leads to unnecessary code duplication, and when a piece of data changes, you have to update it in every single section manually. This causes the code to be unperformant and makes management increasingly difficult as the site grows.
To solve this issue in React, a "Component" system is used. Components are created in a single file and exported. When needed on another page, the component is imported and used. If a fix is needed, it is made solely in the component's file, affecting all pages simultaneously.
It is also possible to dynamically change elements within a component. For this, props are used in React.
Imagine creating a button component. You can reuse the exact same button component across various pages with different text labels (Login, Register, Continue, etc.) while keeping the button style consistent.
// Navbar component
const Navbar = () => {
return (
<div>
<ul>
<li>Ana Səhifə</li>
<li>Bloq</li>
<li>Sosial Media</li>
<li>Əlaqə</li>
</ul>
</div>
)
}
export default Navbar
// Navbar component usage
import Navbar from "./Navbar"
const App = () => {
return (
<div>
<Navbar />
</div>
)
}
export default App
Lack of a Routing System:
Classic HTML sites consist of pages like index.html, about.html, etc. When a user wants to navigate from one page to another, a new page loads from scratch, causing a waste of time. Additionally, the URLs on these websites look cluttered and unprofessional.
SPA (Single Page Application) technologies like React use routing logic. If you need to navigate to another view, those pages are assigned routes like /about or /dashboard.
React does not have a built-in routing system. Therefore, the react-router-dom library is typically used. Through this library, a specific URL address (route) is assigned to each component. When a user navigates to that address, the browser does not reload the page; instead, only the matching component is rendered on the screen.
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
};
export default App;
How to Transition to React?
Contrary to what many think, React is not a new programming language or a completely different technology. React is a library built on top of JavaScript. Therefore, knowing JavaScript is enough to transition to React.
It is also worth noting that React is a library, not a framework. There are many reasons why React is a library rather than a framework, with one of the main ones being that it lacks its own built-in routing system.
The code you write in React is in .jsx (for JavaScript) or .tsx (for TypeScript) format. When executed, this code is compiled down to JavaScript and then rendered in the browser.
Setting up React is very simple. Here are the steps to transition to React:
Make sure Node.js is installed on your computer. If it is not installed, download it from the official Node.js website: https://nodejs.org/en/download
Create a folder in Visual Studio Code or your File Manager and open the terminal inside it.
Type
npm create vite@latest .in the terminal. Enter your project name, and use the arrow keys to select React and JavaScript/TypeScript.Install the required packages by typing
npm i.Activate the website by typing
npm run dev.
As you can see, setting up React is very simple, and you will be able to transition smoothly from HTML/CSS to React. The only things you need to pay attention to here are getting used to the new routing and component systems, and adapting to the new syntax for certain expressions, such as class -> className and onclick -> onClick.
Syntactic Differences Between HTML/CSS and React
<!-- HTML -->
<div class="container"></div>
<!-- JSX -->
<div className="container"></div>
Reason: class is a reserved keyword in JavaScript/React, so it must be written as className.
<!-- HTML -->
<button onclick="handleClick()">Klik</button>
<!-- JSX -->
<button onClick={handleClick}>Klik</button>
Reason: Event names are written in camelCase: onclick -> onClick, onchange -> onChange, onmouseover -> onMouseOver.
onClick={handleClick} // correct
onClick={handleClick()} // incorrect
Reason: handleClick() invokes the function immediately during render.
<!-- HTML -->
<label for="name">Ad</label>
<!-- JSX -->
<label htmlFor="name">Ad</label>
Reason: for is a reserved keyword in JavaScript, so it must be written as htmlFor.
<!-- HTML -->
<div style="color: red; font-size: 16px;"></div>
<!-- JSX -->
<div style={{ color: "red", fontSize: "16px" }}></div>
Reason: The first {} denotes a JavaScript expression, and the second {} denotes a JavaScript object. Property names also use camelCase: font-size -> fontSize, background-color -> backgroundColor.
<!-- HTML -->
<img src="foto.jpg">
<!-- JSX -->
<img src="foto.jpg" />
Reason: In HTML, some tags do not require closing, but in JSX, every tag must be closed either with </tag> or />.
Conclusion
HTML/CSS is the foundation of web development, and every developer must learn it. However, as projects grow and demand more dynamism and interactivity, libraries and frameworks like React make the job significantly easier. Once you start using React, you will notice that processes that used to take up a lot of time speed up drastically. This will allow you to focus on different problems and develop yourself further.
Thank you for your attention.
Top comments (0)