DEV Community: Samir Hashimov

Why HTML/CSS Is Not Enough: Steps to Transition from HTML to React

Samir Hashimov — Fri, 25 Sep 2026 15:53:26 +0000

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.

Join us so you don't miss new articles

Why Are There So Many Specialties? What Are the Differences Between IT Degrees?

Samir Hashimov — Sun, 20 Sep 2026 13:16:34 +0000

When I realized I had an interest in coding and wanted to pursue this field, I took a look at the degree programs offered by universities. The landscape I saw surprised me.

Programming wasn't just a single degree. There were fields like Computer Science, Computer Engineering, Information Technology, and Information Security—degrees that looked identical at first glance but which I later learned had significant differences.

Terms often used in casual conversation, such as "IT guy" or "Programmer," didn't really cover these distinctions.

Naturally, I conducted research into these majors while making my choice, clarifying their similarities and differences. Now, I am continuing my education in my chosen field.

I hope this article will be useful for students choosing a degree, those looking to switch fields, or young people just starting out in IT.

What is the difference between these majors?

Although they may look like copies of each other at first glance, these fields are actually quite different. They primarily differ based on what part of the computer they focus on.

Computer Science

Computer Science (CS) primarily focuses on software, algorithms, and the theoretical foundations of computer science.

It covers knowledge in algorithms, programming languages, databases, data structures, artificial intelligence, and more.

Professionals graduating from this field carry out tasks such as writing, managing, and developing the software side of computers.

For example, writing application, system, and instrumental software, as well as the creation of websites and mobile applications, falls under this field.

Graduates of this field typically pursue careers such as:
Software Engineer, Web Developer, Mobile Developer, Backend Developer, AI/ML Engineer, Data Engineer, etc.

Computer Engineering

Computer Engineering (CE) is closer to the hardware side of the computer.

It covers knowledge in electronics, embedded systems, sensors, microchips, computer architecture, and more.

For example, the design of microchips and embedded systems, building systems where hardware and software work together, and the development of robotics and automation systems fall under this field.

Graduates of this field typically pursue careers such as:
Internet of Things (IoT), Embedded Systems, Robotics, Automation, Hardware Engineer, etc.

Information Technology

Information Technology (IT) involves building, managing, and utilizing network and server technologies.

The term "IT guy," widely used in casual conversation, originated from the initials of this term (I-T).

It covers knowledge in computer networks, system administration, cloud systems, servers, technical support, and more.

For example, ensuring a company's server network remains operational, server repair and configuration, and database management fall under this field.

Graduates of this field typically pursue careers such as:
System Administrator, Network Engineer, IT HelpDesk Engineer, DevOps, etc.

Information Security

Information Security, also known as Cybersecurity, is the field of protecting systems, programs, and data from external attacks.

The term "Hacker," which is widely used, is often applied to specialists working in this field. While not all hackers are malicious, the most well-known type are those who inflict damage on systems.

It covers knowledge in network security, cryptography, ethical hacking, risk analysis, and more.

For example, preventing attacks on a system, protecting personal user data, and testing security systems fall under this field.

Graduates of this field typically pursue careers such as:
Security Analyst, Penetration Tester, SOC Analyst, Security Engineer, etc.

What does a degree actually teach us?

One of the most common misconceptions in the IT field is that you will be "job-ready" the moment you graduate. The reality is that the material taught in academic programs is not always the specific knowledge that employers require you to have.

Imagine you are applying for a Web Developer vacancy. The company will want you to know React.js, Tailwind, and TypeScript. However, none of these are taught in many university or college curriculums. You might then think, as many do: "Is a formal degree useless?"

Of course not. The purpose of a formal degree is to teach you the fundamentals, theoretical knowledge, and a mindset for problem-solving. Regardless of the programming language, the same core principles, theoretical knowledge, and thought processes are always used. Once you know how to build an algorithm, it makes no difference which programming language you use to implement it.

A degree teaches you operating systems, programming basics, algorithms, and data structures. You must take those foundations and learn the specific technologies relevant to the IT branch you choose to pursue.

While a diploma is an important indicator in the hiring process, practical projects, a portfolio, internships, and the ability to solve real-world problems play a crucial role. A diploma alone does not give you an advantage over other candidates; the main factor is how much effort you have put into your own development.

Therefore, it is more correct to view university not as "a place that will give me a ready-made job," but as "an environment that will give me a strong foundation." You must complete the rest by working on projects, internships, self-study, and tackling real-world problems.

Which major should I choose?

By now, we have seen the main differences between these fields. After all this, which one should you choose?

There is no single answer to "What is the best major?" The better question is: "Which major is more suitable for me?"

Start with your interests:

If programming, algorithms, and software are more interesting to you, you can choose Computer Science.
If hardware, electronics, and the internal structure of computers interest you, you can look into Computer Engineering.
If you enjoy working with networks, servers, and cloud systems, IT might be more suitable.
If you have an interest in security, protecting systems, and analyzing attacks, it makes more sense to choose the Cybersecurity track.

Another important point is not to limit yourself to just one specialty. In the IT field, paths often intersect. For example, someone studying Computer Science can later move into cloud or cybersecurity. Or someone studying IT can transition into software development. Therefore, while your first choice is important, it is not your final one.

Ultimately, when choosing a major, try to answer three questions:

What interests me?
What can I be good at?
What problems do I want to solve with this knowledge in the future?

Once you answer these questions, it will be easier to head in your desired direction.

In conclusion, there is no "best IT major." There is only the major that is most suitable for you. The main point is not just to choose a degree, but to build your own path upon the foundation that the degree provides.

Footer

The purpose of this article was to simply explain the main differences between the four most commonly confused IT degrees. If you are facing a degree choice, don't look just at the name of the specialty—look at what that program will teach you and what future paths it opens up.

Thank you for your attention.

Join our community to ensure you don't miss new posts

Subscribe now

A New Fraud Trend in Azerbaijan: "Free" Training

Samir Hashimov — Sun, 20 Sep 2026 13:15:21 +0000

Lately, I’ve been encountering scammers who promise "free lessons," "career advancement," "business partnerships," and more. These ads frequently pop up on Instagram, and I often see many students commenting with a simple "+" or "I’m interested" under these posts. Given that courses in many fields typically cost upwards of 200 AZN, these offers are very tempting. Once people believe these offers and make contact, they fall into a trap we call "Social Engineering."

What is Social Engineering?

Social Engineering might sound like a sophisticated technical term, but it is actually a common attack method used by scammers.

This technique is based on manipulating the victim through psychological methods rather than technical ones (hacking).

A widely spread form of social engineering today is the Phishing attack.

What is a Phishing attack?

Phishing attacks involve sending the victim a specially prepared URL (link) and engaging in communication to trick them into clicking it.

Scammers usually start by creating artificial panic. For example, they might claim your account has been hacked and that you must click a link to recover it. The moment you click, you are redirected to a fake site built by the scammer. These sites are often highly accurate copies of real websites.

As soon as you mistake it for the original site and enter your personal credentials, that information falls directly into the scammer’s hands.

What are "Red Flags"?

In social engineering, scammers often exhibit certain suspicious behaviors while trying to convince their victims. The best way to protect yourself is to analyze and evaluate these suspicious signs.

A Red Flag is a warning sign that something is dangerous, unreliable, or fraudulent. If the information in a message is inconsistent, if they avoid providing specific details, if they demand payment for no reason, or if they create an artificial sense of urgency ("limited spots," "if you don't buy today, it won't be available tomorrow, etc."), these are all Red Flags.

Not every Red Flag guarantees the person is a 100% scammer, but it definitely requires you to be cautious. Some Red Flags can be false alarms. For example, avoiding specific information isn't always a sign of a scam; it could be company policy.

In summary, Red Flags don't guarantee you are being scammed, but they are a signal to be extra vigilant.

My Experience: The Social Engineering Trap

While browsing a well-known classifieds site, I saw a listing for a "free training" course. It claimed to teach 4 different financial fields in just 8 lessons, and it was advertised as completely free.

I contacted the course via WhatsApp to register. They provided the syllabus, the schedule (how many days and hours per week), and the start date. Finally, they claimed that the "free training" required a certificate and that I had to pay for it. They sent a very hollow and nonsensical response about why this was mandatory, claiming "it is a project and the company name must be noted."

Another Red Flag was the methodology of the syllabus. The syllabus was clearly generated entirely by AI, and the topics they claimed to cover were too broad and disconnected to be taught in just 8 lessons.

The syllabus is thrown together, and they avoid answering direct questions.

In reality, one could conclude this was a social engineering attempt based on the first two Red Flags alone. I continued the conversation to see what the next steps would be.

I pretended to agree, expressed interest in taking the course, and asked for the payment method. As I expected, instead of a formal payment system, they sent a card number to perform an informal card-to-card transfer.

They are demanding a card-to-card payment and that I send a receipt.

Of course, I didn't pay; I was just measuring their reaction. After that last message, the tone of the conversation changed.

In a normal scenario, free courses should provide certificates without requiring payment. Demanding payment falls under the category of consumer deception, especially since the course was advertised as "free."

Even if you paid for these types of trainings, you wouldn't receive quality education. These are just money traps or low-quality mini-courses created by AI in a short time.

Back to the chat: I asked why the syllabus was prepared poorly by AI and why the certificate was paid. The answers I got were just attempts to distract from the subject.

One of the biggest Red Flags was this: They claimed to have been holding classes since 2025 and that 8 groups had finished so far. I asked them to send photos of these classes, and they redirected me to their social media page. Interestingly, all the posts on their social media were AI-generated, and there wasn't a single photo of actual classes.

When I asked how they could fit so many topics into the two lessons in the AI-generated syllabus, the response was:

"We don't guarantee that..."

Then, the other party gave up and ended the conversation: "Anyway, if you don't want to join, that's fine, we don't have to prove anything to anyone 🙏 good luck."

Note: Despite reporting this as fraud to the well-known classifieds site that hosted the ad, the listing was not removed.

How Can You Protect Yourself?

While it is impossible to be fully protected from such attacks, you can reduce the risk:

Don't fall for FOMO (Fear of Missing Out): If the other party tries to rush you into making a decision with phrases like "Spots are limited" or "Today is the last day," don't let them pressure you.
Ask for Proof: If they claim something, ask them to substantiate it. If they dodge the question, it's a Red Flag.
Be careful when paying: Legitimate companies never demand card-to-card transfers. Such transactions should always involve an invoice or a legal entity.
Check official sources: Verify the party's information. Check their official website, tax ID (VÖEN), and whether the company name exists and matches their claims.

Conclusion

As you can see, social engineering attacks can be easily detected with Red Flags. In this specific conversation, we encountered several Red Flags from the start. Once you spot these, you should stop all communication with the party.

These types of attacks mostly target students, those with no work experience, people urgently looking for a job, and young people. If you are in one of these groups, the likelihood of them exploiting your inexperience is higher.

I wrote this article to inform you about this topic and to encourage you to be more cautious.

Footer

If you liked this article, don't forget to share, like, and share your thoughts to help educate more people.

Also, if this article is well-received, I will share an article about a much more dangerous model of the social engineering attacks I've encountered.

Thanks for your time!

Join us so you don't miss new posts

Subscribe now

Mini "Shell" Gas Station with React: useState and JSON DB

Samir Hashimov — Sun, 20 Sep 2026 13:12:11 +0000

Small applications often seem insignificant. However, if these apps solve a real problem, are technically sound, and are built with UX in mind, they can be more valuable than complex systems.

In this article, I will talk about the logic behind a mini fuel calculation app I built using React, the technical decisions I made, and the problems I encountered. The goal isn't to claim I've created something "never seen before," but to explain why I made these specific choices.

Starting the App

First, because fuel prices are dynamic, I decided to store them in a JSON file. This allows for centralized management of the pricing.

{
  "AI-92_gasoline": 1.15,
  "AI-95_gasoline": 1.60,
  "AI-98_gasoline": 2.30,
  "diesel": 1.10,
  "LPG": 0.45,
  "methane_CNG": 0.40,
  "electricity": 0.125
}

Next, I set up the component structure. This prevents the codebase from becoming overly complex as it scales. Since it's a small project, I divided it into two main components: Header and Content.

Retrieving Data

Typically, when we go to a gas station, we specify the amount of fuel we want, the employee fills it up, and gives us a receipt. I decided to simulate this in my project. The user selects the fuel type from a dropdown menu and enters the amount in an input field. Once the "Calculate" button is clicked, a receipt is generated for the user.

You can check out the source code in the GitHub repository.

Calculating Data

As we know, calculating the fuel cost requires multiplying the fuel price by the fuel amount. Let's create a function for this calculation:

import React from 'react'
import '../css/content.css'
import tarif from '../data/tarif.json'

const Content = () => {

    function CalcFuel(type, amount) {
        return tarif[type] * amount;
    }

    console.log(CalcFuel("LPG", 3))


    return (
        <div>

        </div>
    )
}

export default Content

As we can see, this function takes two dynamic arguments: type (fuel type) and amount (fuel volume).

We can get the type value by linking the user's dropdown selection to our JSON data: tarif[type]. By placing the selected value into the type parameter, we can navigate the JSON and retrieve the corresponding value.

const type = e.target.fuel.value;

The fuel amount can be retrieved by sending the value entered by the user in the amount input.

const amount = parseFloat(e.target.amount.value);

To calculate the total amount, we can trigger the following code during the form's submit event:

const total = CalcFuel(type, amount);

This defines a total variable and assigns it the result of the CalcFuel() function.

Displaying the Result

Inspired by the physical receipts given at gas stations, I decided to design a UI element that represents a receipt to display the final result.

After applying the necessary CSS styling, I achieved the following result:

The problem I encountered here was that it wasn't immediately possible to show the result from a function directly in the UI.

To solve this, I used useState. useState caught my attention because it allows variables to be used and updated globally within the component's scope. I assigned the variables to useState, and they were ready to be rendered in the UI.

With this, the selected fuel type, amount, and total price are calculated dynamically and presented to the UI.

Conclusion

Our mini "Gas Station" site is now fully functional. The user selects the fuel type, enters the amount, and sees the result on the receipt upon clicking the "Calculate" button.

I hope the logic behind this mini project inspires you and helps you build your own small applications with React.

Thanks for your time! ;)

Project GitHub Repo: Shell-Gas-Station

Note: This site is for educational purposes only and has no affiliation with the Shell company.