DEV Community: Sarthak

Some Basic React Concepts!!

Sarthak — Thu, 12 Feb 2026 12:44:48 +0000

Lets Start with Whyyy React??
First of all React is a "LIBRARY"...as JS library to maintain frontend efficiently.

Before modern UI libraries, updating a webpage could feel messy. Even small UI changes often required manual DOM manipulation — tedious, error-prone, and hard to scale. As applications grew, keeping everything in sync became a real challenge.

Whenever any state is changed(think of state as a component's memory)...React compares the old virtual DOM and the new one and renders only the required changes...
This update process is called Reconciliation.

Lets Start from scratch...

Components:Reusable code segment or a function that returns JSX.Yeah just simple as that...
JSX:Markup Syntax Extension for Javascript that lets you write HTML like syntax inside a Javascript file.

Note:A component can't return multiple JSX tags - instead wrap them in a single

container.

Props:React components use props to interact with each other. Similar to passing parameters to a function just a little less stricter.
State:Components often need to change what's on screen as a result of interaction.To make changes to interactions it needs a memory to remember the state of a variable before interaction...Thats is...State is a component's memory.
Hooks:We add a state variable by
const [index, setIndex] = useState(0);

Here, index represents the current state value, while setIndex is the function used to update that state. Both are returned by React’s useState Hook, which allows functional components to store and manage state.

Some commonly used hooks-

useState()-State hook , manages states
useContext()-Context hooks , use data passed through context.
useRef()-Reference hooks , Used to reference objects..

You can even implement your own hooks..

Exports:Whenever you build a component you need to export it so that it can be imported and used in other pages/files.But exporting follows two methods-
1)Default:Only 1 function per object can be exported by this method.
2)Named:Multiple functions can be exported but with different names.
Effects:Rendering is React’s main job: state changes → UI updates. Simple.

But real apps don’t just render stuff. They fetch data, start timers, listen for events, or update the page title. These actions are called side effects — work that happens outside the UI itself.

That’s where the useEffect Hook comes in.

useEffect(() => { console.log("Component updated!"); }, []);

The function inside useEffect runs after React finishes rendering. This keeps your UI logic clean while still letting your component do real-world work.

The dependency array controls when the effect runs:

[] → run once after the first render

[value] → run when that value changes

no array → run after every render

Think of useEffect as React saying:
“Render first… then handle everything else.”

That's some basic intro to React library...but ofcourse you need to deepdive more...
https://react.dev/learn

Refer to this and keep learning...

What other platforms do devs use for tech blogs???

Sarthak — Tue, 23 Dec 2025 06:11:52 +0000

OS and Hardware Interaction( Kernel and Drivers )

Sarthak — Thu, 11 Dec 2025 18:06:44 +0000

Ever wondered how your operating system is interacting with bluetooth or wifi card!!!

Let's begin with a simple scenario:

Assume you want to connect your bluetooth headphones to your PC,you click on connect button and get message like "Connected" or "Unable to connected"....

What happened in between your click and message is:
UserActions --> UI Framework --> UserSubsystem makes Systemcalls --> Kernel Mode --> Kernel calls respective drivers --> Hardware

Seems easy???Nahh its not!
Your user subsytem makes a system call to access the hardware which is passed to kernel.Thats when the main part kicks in.

Lets deep dive into kernel first:

Kernel is usually not a layered structure....its a mixture of modular,monolithic as well as layered structure....but layered approach help us understand the working of kernel easily.
On receiving a system call:

1. Kernel Syscall Dispatcher gets control:

Validates system call number and details.
Pointer lookup-Can be said that this maps syscalls to C functions..(Ofcourse its all code that works underneath)

2. Syscall Handler Invoked:

Kernel Subsystem takes over which has different layers like VFS(virtual file system),Network Stack,Memory Subsystem,Process Scheduler,Device Management
Depending on the system call , it enters a layer

3.Driver Call

Drivers dont directly recieve a systemcall.
They receive instructions from kernel subsystem(VFSops,netdevops etc) Ex:To access hardwares Device Management layer is accessed in kernel which usually creates an ioctlops which is passed to suitable drivers.

But the job doesn't end here....Kernels interact with drivers which then interact with hardware.

Lets deep dive into drivers too:
Drivers don't have any specific structure,it depends on the hardware that the driver deals with.
But flow of operations usually remains same in all drivers-

“Heyy kernel, I'm a driver for this kind of device.
If you ever see hardware with this ID, call me.”

Create ops Table (Collection of function pointers that driver gives to kernel) Think of it like the driver saying:

“Hey kernel, if you want me to do X, call this function.
If you want Y, call that one.
If you ask for Z, here’s the address of the function.”

Initialize Hardware (Inside probe() function) Once the kernel matches driver ↔ hardware, it calls the driver’s probe(). This is where the driver:

1) maps MMIO registers

2) requests interrupts (request_irq())

3) allocates kernel memory

4) resets/initializes the hardware

5) registers itself into kernel subsystems (netdev, blockdev, char device, etc.)

Think of probe() like the driver moving into its apartment and setting up the furniture.

Handle Interrupts Hardware doesn’t politely send emails. It screams at the CPU. So the driver registers an interrupt handler: request_irq(irq_number, my_handler, ...)

When hardware finishes something (packet received, DMA complete, buffer empty):
→ CPU triggers interrupt
→ Kernel interrupt manager dispatches
→ Driver’s interrupt handler runs
→ Driver processes event
→ Notifies the proper kernel subsystem

Data Transfer (MMIO / DMA) Drivers use:

MMIO → read/write registers directly

DMA → tell hardware to perform large data transfers without CPU babysitting

Driver sets these up, kernel keeps everything safe.

What happens when the Linux subsystem sends an ioctl (or any ops-table call) to the driver?

User calls ioctl() → enters kernel through the syscall interface.
Kernel checks the file descriptor → finds which device/driver it belongs to.
Kernel looks up the driver’s ops table (like .unlocked_ioctl).
Kernel calls the driver function via the ops pointer (no direct linking, just a function pointer jump).
Driver processes the command (configure hardware, read/write registers, trigger DMA, etc.).
Driver returns output/status back to the kernel.
Kernel returns the result to the user application.

And thats how you interact with hardwares...
Some references for further exploring:

https://elixir.bootlin.com/linux/v6.18/source/drivers/usb/core/usb.c
https://eng.libretexts.org/Bookshelves/Computer_Science/Operating_Systems/Linux_-_The_Penguin_Marches_On_(McClanahan)/06:_Kernel_Module_Management/1.03:_Linux_Kernel_Subsystem

Deploying My WebApp on Cloud using Nginx

Sarthak — Sat, 21 Jun 2025 18:07:57 +0000

Introduction

During my first internship, I was asked to deploy my project to the cloud. What seemed like a straightforward task quickly turned into a maze — I had to go through 10 different resources, and each one only answered some part of the puzzle.

In this post, I’ll walk you through the complete deployment process I followed — including the problems I faced and how I solved them — so you don’t have to go through the same hassle.

Where I Started

After lots of debugging and testing, both my backend and frontend were working perfectly on my local machine. The next step was deployment — and that’s where things got interesting.

1)Dockerisation:

I was asked to follow best practices for deployment, so instead of cloning the entire app directly onto the server, I decided to dockerize it.

Create a Dockerfile:
Your Dockerfile will depend on your codebase. Since I was working with Node.js, here’s a basic structure for a Node.js Dockerfile:

# 1. Base image
FROM node:18

# 2. Set working directory
WORKDIR /app

# 3. Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# 4. Copy the rest of the app
COPY . .

# 5. Expose a port
EXPOSE 3000

# 6. Start the app
CMD ["npm", "start"]

One interesting thing I learned was copying package.json before running npm install, and copying the rest of the code later. This allows Docker to cache the dependencies layer, speeding up builds — a best practice in Dockerfile design.

Now I needed to build this docker .Assuming you have docker already installed in your local machines , here's a basic command to build and run an image .

Build the image (name it whatever you want)
docker build -t my-app .
Run the app
docker run -p 3000:3000 my-app
If your container is running fine, you can push the image to Docker Hub and then pull it on your server. (Think of Docker–Docker Hub like Git–GitHub.)

Once your image is on your server...
🎉 CONGRATS! You’ve completed Phase 1.

Some problems you may face while dockerisation

Frontend builds can be tricky — different libraries and versions may cause conflicts or build errors.
Environment variables need to be handled carefully. You can pass them using flags like:
docker run --env-file .env my-app

2)Reverse Proxy:

Once your image is running on lets assume port 3000 of your server system (lets assume ubuntu),You can try to access the server with its public ip , but wait wait wait.......We can only access the port on which the app is running, in our case its 3000.
Here's where reverse proxy comes to play,forwarding requests to the required port.

I used Nginx (pronounced as engineX)for that,but capabilities of nginx does'nt stop here,its also a
🖥️ Web server
🔁 Reverse proxy (passes requests to another server)
⚖️ Load balancer (shares traffic across multiple servers)
🔐 SSL handler (helps secure your website)
📦 Cache (speeds things up by storing responses)
It’s lightweight, fast, and used by companies like Netflix, Dropbox, and WordPress. Pretty cool for something I hadn’t heard of before this task!

3)Setting Up Nginx

Let’s set up Nginx for reverse proxy only for now — I’ll cover Load Balancing and SSH handling in future blogs.

Install Nginx
sudo apt install nginx
Start and Enable Nginx
sudo systemctl start nginx sudo systemctl enable nginx
Check its status by
sudo systemctl status nginx

If the output is something like this 🎉 CONGRATS your nginx is up and running.

4)Setting up Reverse Proxy

Just a little more and it will be done...
-lets open the Nginx default config file
sudo nano /etc/nginx/sites-available/default

-Replace or edit the server block similar to this
`server {
listen 80;
server_name

location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

}
`
Note that we have not setup the SSL certificate yet and only HTTP requests are working...and HTTP requests are received at port 80 so thats why we have mentioned listen 80 there.

Press ctrl+O then Enter then ctrl+X

-Test the config to check for any errors
sudo nginx -t

If your output is like this....Good going

-Last Step
Restart the nginx server
sudo systemctl reload nginx

Now test it out on a browser
http://<your-public-ip>/

Enjoy your app from any device, anywhere in the world! 📱💻🖥️

NOTE:

We've only served your app using the server's public IP for now.
In upcoming blogs, I’ll show you how to:

Add a custom domain

Enable HTTPS requests with SSL

Set up load balancing

And much more...

Till then — all the best! 🚀👨‍💻