DEV Community: Silas

Getting Started with ReactJS

Silas — Mon, 18 May 2026 08:12:24 +0000

Ever wanted to get started with react but just couldn't find the straight-to-the-point guide and you also couldn't handle sitting through hours of tutorials? Well, let's try it this way.

I will not even try to get you from 0-100 of react in this one post. Just a little push is what I promise, so let's dive right in.

What is React

React is a popular open-source javascript framework by Meta used primarily for building user interfaces majorly for single page applications.

Installation

To get started, you need to have node (and npm) installed. To install, follow the guide here

Once installation is complete, you can confirm by running node -v on your terminal(or command prompt), which should output something like v24.9.0. That should confirm the installation was successful.

Install React

Over the years, react installation has changed from the traditional create-react-app to more reliable and efficient methods of using scaffolds, specifically vite.

open your terminal(if not already opened)
Navigate to your desired directory
Run npm create vite@latest This will prompt you for a few inputs like project name, framework as shown:

Finally, execute the last 3 commands shown : cd project-name, npm install and finally npm run dev.

npm install installs the dependencies required by the project as defined in package.json
npm run dev starts the development server which runs your project locally.

And that's our checkpoint. You have successfully installed and ran a react project.

As of vite 8, the setup comes with:
/public - this directory contains public assets like images
/src - contains all the source code of the app
.gitignore - default populated .gitignore template
eslint.config.js - configuration for the linter
index.html - the main html file that react appends components
package*.json - stores configuration and dependencies for the app
README.md - basic vite documentation
vite.config.js - configuration for vite development server

Inside src, we have 2 css and 2 jsx files. The .jsx files are native to react, they denote react components.

App.css is styling used within App.jsx whereas
index.css is a global styling sheet for index.html, which App inherits.
Main.jsx is the entrypoint of the app. This is where the react app is injected into index.html's <div id="root"></div>

Now let's code ...

Delete everything in App.jsx and replace it with this:

function App(){
    return(<p>Hello React</p>)
}

When you run the server , npm run dev and open the address http://localhost:5173 in browser, you should see Hello React displayed

JSX Basics

JSX(Javascript XML) is a syntax that allows you to write HTML-like code within Javascript. This is what aims to make react easy and intuitive, and make transition from HTML almost seamless.
JSX will look almost exactly like HTML, but with a few differences:

//jsx
<div className="container"></div> 

instead of

//html
<div class="container"></div>

It is worth noting that, a JSX component or function MUST return ONLY ONE child/parent component. Having more than one will result in React throwing an error.

//only one element is returned. This will work
function App(){
    return(
      <p>Hello React</p>
    )
}

//More than one element is returned. This will NOT work
function App(){
    return(
      <p>Hello React</p>
      <p>Another element that will break compilation</p>
    )
}

Ensure to only have one parent element always: To fix the above, do this:

function App(){
    return(
<div>
      <p>Hello React</p>
      <p>Another element that will break compilation</p>
</div>
    )
}

This consequently wraps all the elements in one parent div and thus the jsx only returns one element.

Manage States with useState()

In React, you will run into a number of functions that start with use e.g useState, useEffect, useContext and so on. These are called Hooks. We will learn later about them in depth.
For now, we will start with the common ones: useState and useEffect.

useState
This is a snapshot of a component(and its data) at a particular point in time. Component's data changes over time, so each change represent a new state.
React has a state manager, useState() to manage change in states. When a state changes, react triggers a re-render of that component to show the change, e.g user typing into a textfield. Every keypress is a new state hence the textbox is re-rendered with the new data everytime.

To use this, first import useState at the top of the file:
import {useState} from 'react'

Within the function body:
const [count,setCount] = useState(0)

useState() takes a default value that represents the datatype of what the state stores.
Our example tells us that count is of type int

count -> state variable
setCount -> function to change state.

** NB: you should NEVER directly change count**

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount((prev) => setCount(prev + 1));
  }

  return (
    <div>
      <p>Count: { count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default App;

This shows us a simple implementation of useState() in action.

TODO: Try implement a decrement.

UseEffect

This hook is used to define an action done when a particular event happens.
It is used to define what happens:

Immediately the app loads/runs
When a state changes.

The syntax for this is:

First, import: import { useEffect } from react
Second, implement:

Pattern 1: Run on Every Render

useEffect(() => {
  console.log("This runs after EVERY render");
});
// No dependency array = runs every time the component re-renders

Pattern 2: Run Once on Mount

useEffect(() => {
  console.log("This runs ONCE when component first appears");
}, []);
// Empty array [] = runs only on initial mount

Pattern 3: Run When Dependencies Change

useEffect(() => {
  console.log("This runs when 'count' changes");
}, [count]);
// Array with variables = runs when any of those variables change

The Dependency Array Explained
Think of the dependency array as React asking: "What should I watch for changes?"

No array - "Watch everything, run after every render"
Empty [] - "Watch nothing, run once and done"
[count, name] - "Watch count and name, run when either changes"

import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  // Runs every render
  useEffect(() => {
    console.log("Component rendered");
  });

  // Runs once when app starts
  useEffect(() => {
    console.log("App mounted - this runs once");
  }, []);

  // Runs when count changes
  useEffect(() => {
    console.log(`Count changed to: ${count}`);
  }, [count]);

  function handleClick() {
    setCount(prev => prev + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default App;

TODO:
Open your browser console and click the increment button. Watch the console to see which useEffect hooks run and when.

Note: You might see each log appear twice in development mode. This is React's StrictMode deliberately rendering components twice to help catch bugs - it only happens in development, not in production.

Common Use Cases

[] empty array: Fetching initial data, setting up event listeners
[dependency]: Fetching new data when a filter changes, updating localStorage when state changes
No array: Usually avoided unless you need something to happen on every render

This guide has introduced you to JSX,useState and useEffect hooks in react.

Keep practicing, see you on the next one.

Rocks vs Hard Places

Silas — Mon, 20 Apr 2026 07:54:11 +0000

"Between a rock and a hard place". We have all (probably) come across this phrase, or even worse, experienced it, lived through it.
When you hear this, what goes on in your mind? What sparks?

In such a situation, you are always faced with two difficult options to choose one. Neither is pleasant, but you have to choose the scorpion or the snake, the pan or the fire.

I hope life has been fair to you!!

How does this relate to programming you ask?

Let's kick it up a notch.

Code... Rocks... Hard Places

Updates are a crucial part of software, from your OS to you apps, to even your wardrobe!!
We know the craze that comes with new releases of devices and whatnots.

iPhone 17 pre-order demand is significantly higher than the iPhone 16, with analysts reporting a 5-10% increase in early sales. The Pro Max model leads demand, with 60% higher production to meet demand, while the new "iPhone Air" model has seen a strong, high-demand release. China is seeing record-breaking demand

There are 2 categories of people. Those who will update to the latest versions of...anything, versus the ones who stick to the old. No harm in either, no judgement whatsoever.
In the context of updates, Kenya's giant telco, Safaricom, released a major update to their unified MyOneApp received a lot of backlash about it, but that had a different tune to our current song, so we wont get into it.

My big question to you is, why would you update (or apt upgrade ;)) to a newer version? Let me hear your thoughts.

Story time ...

I have been used to the normal way of doing things:

npm create vite@latest 
npm i tailwindcss @tailwindcss/vite

Things always worked seamlessly, I was always a happy man. My last status check said that i was on Vite 7 and tailwind 4.
I ran my project well without fusses.

Then came this one day, I need to whip something up, so I do the usual, and suddenly I was running into errors. When your terminal goes blood red, you know someone(I mean something) is dead!!
Now I was panicking and not knowing what to do, because I needed to ship something.

The new vite was looking awesome and flashy, shifting to a more 'purple-y' theme. Our traditional yellow-orange shazam-like logo and what we were used to has now gotten a facelift(depending on how you choose to see it).

On an abnormal level, my OCD😉 doesn't allow me to be out-of date. I'm talking about going to the app store and just hitting update because I can and because that notification has some alert badge/pill on it.
I'm talking about some sudo apt update and 'sudo apt upgrade' just because it said 17 packages can be upgraded to latest version

Sometimes it works, and sometimes it just turns around and bites you where you can't see.

After so many keystrokes and keyboard wars, I (my OCD) was faced with the brutal... Keep vite 8 and forget about Tailwind(probably it still could work with postcss and autoprefixer, but meh!!), or go down a rung, back to vite 7.
Because I was in need, I took a glass of water and swallowed my pride😂.

Of course after a few unanswered DM's and tags to Tailwindcss and Vite, few weeks later, Tailwindcss 4.2.2 came out and my happiness was restored... Of course I hit the npm i vite@latest as soon as I could, bumped up tailwind as well, fought with package-lock.json and node_modules for a while, and I won (of course the system won).

I dont refute that updates are essential, especially on the security side of things(and with how fast react changes), there is another OCD side of found [X] vulnerabilities ([Y] low, [Z] moderate, [A] high, [B] critical). That thing scaaaarreesss me!! It always sends me scrambling to npm audit fix, and it's not like I'm making a fintech app...Its just a ToDo list!

So, would you always need to update? Do you read the changelogs and the effects it would have, or you just FAFO and taste it like I did?
Let me know your crazy experiences on Latest(rock) and Stable(hard place) side of versions.

Lets keep Reacting!

Bash, Coffee, and Me: Learning Shell without losing your Mind

Silas — Mon, 02 Mar 2026 08:42:58 +0000

Its a cold Monday morning and the coffee doesn't seem to have hit the endpoint yet, or maybe it has and gotten a 400-500 HTTP status code response.
As I wait for that to resolve, I find warmth in being bourne again. I am in the bourne again shell, get it?

Bash has always felt a bit intimidating, and just a bit far out of my reach. Always looking mean and something too big to wrap my head around.

Wait, What is Bash?

Bash is a command-line interpreter and shell for Unix-like operating systems (Linux, macOS) that allows users to interact with the OS via text-based commands. It serves as the default interface for executing, automating, and scripting system tasks, acting as a bridge between the user and the kernel.🔗

But the problem, I think, was me trying to swallow it whole. Fast forward time to a few days ago, a peer introduced me to a game. Oh how I love games!!
This game gets you started on the essentials of bash. I was well versed with the very basic, or rather the ones I'd use on a daily basis: ls, mkdir, touch and a few others, so those ones didn't really raise my 'spidey senses'.

Basics?

So, lets go through what I call 'the very basics':
ls: lists contents of a directory
mkdir name: creates a new directory 'name' in the current directory
touch name: creates a new file 'name' in the current directory

Most of these commands take overloads or parameters or flags which are placed after the command to add more options or coverage to them.
As we have already seen, ls just outputs the contents of a directory, both files and folders, with barely no distinction.

Deep (or shallow) dive into ls

ls -l : This is "long listing". It will give you the contents of the current directory together with more info about each content. You will get an output resembling this:

drwxr-xr-x 2 ksilas cohort2 4096 Feb 17 13:27 algorithm

The first letter d shows that 'algorithm' is a directory. A file would be denoted with a -
The second batch (position 2,3,4) which are rwx represent the permission assigned to the user: r-read, w-write, x-execute
The next 3 in position 5,6,7 are also permissions for the group the user/file is in.
The last 3 are permissions for others. These permissions apply to users who are not owners and are not not in the user group.

The number that follows the permission, 2, represents the number of hard links in the directory.

The next text, ksilas represent the owner of the file, and cohort2 represents the group in which the file belongs to. By default, the group will be the one the owner belongs to.

4096 is the size, in bytes, of the file or directory

Feb 17 13:27 represents the date and time the file/directory was last modified.

algorithm would then finally represent the current items with the above stats.

Still There?

Already overwhelming, right???😄 Stay with me. I haven't shown you something amazing. We want to find a file with a particular name, and of course the directory.
This is where I shut down😰.
What is grep, you ask. Well, I actually just went to google that up😅. Global Regular Expression Print. Basically, it looks for files or text that match the particular pattern given. Say grep "hello" will look for texts that contain 'hello'

But that's not even the problem. What annoyed me was, yes it would list all files that match a pattern, but what I really needed was WHERE the file is. Grep didn't give me that, or at least I didn't know how to ask nicely.

FIND the savior

In walks FIND. I could never ask for more😂🤩.
This is the heart of our discourse today.
Suppose you want to find a FILE with size 100 bytes, and an owner silas, I could imagine your head spinning already.

But for our Swiss Army knife:

**find . -type f -size 100c -user silas**

Let me leave you marvel at the wonders of Bourne Again SHell!! I go away smiling... a happier man.

But before I go, check out the game I mentioned earlier.

Bye👋🏻

How to Write Git Commit Messages Like a Pro

Silas — Wed, 11 Feb 2026 01:34:24 +0000

Ever wondered how to write commit messages for Git? Or maybe you’ve written messages that were technically correct but still caused murmurs in your team?

Well, that ends here and now. We’ve all been victims of this anomaly, and the way forward is simple: improve ourselves and share knowledge.
Let's dive in...

What is Git?

Git is a distributed version control system that manages versions of source code or data. Programmers often use it to collaborate on projects efficiently.

Git lets you work locally, track changes to files, and push those changes to remote repositories like GitHub or Bitbucket for collaboration.
More about git
Git official

How to commit

A commit is made by running git commit -m "some-message" with -m flag denoting message and "some-message" being the details of what you are committing, which is the main point of our article today.

Commit messages aren’t about long paragraphs, perfect grammar, or capitalization. They are about clarity, brevity, and readability.

Common Commit Message Tags

Using standard tags makes Git history clear and helps your team understand the purpose of each change.

feat:
when the commit adds or changes functionality in a way that matters to users e.g feat: add GitHub OAuth login
fix:
when the commit fixes a bug that existed e.g fix: handle API rate limits
docs:
when only the documentation changes (no code behavior changes). e.g docs: update README with setup instructions
style:
Code style or formatting changes that do not affect logic or behavior. e.g style: fix indentation
refactor:
Code changes that improve structure or readability without changing behavior. e.g refactor: simplify GitHub client logic
test:
Adds, updates, or fixes tests only. e.g test: add unit tests for login
chore:
Maintenance tasks that don’t affect application behavior
(dependencies, configs, scripts). e.g chore: update GitHub Actions workflow
revert:
Reverts a previous commit e.g revert: undo login feature
perf:
Changes that improve performance e.g perf: optimize database queries
build:
Changes that affect the build system or external dependencies. e.g build: update dependencies

It is also good practice to write your commits in the present tense. Instead of "feat: added login functionality", do "feat: add login functionality"

"That's how dad did it, that's how America does it, and it's worked out pretty well so far"
~Iron Man 2008

This sets the base for linear and standard collaboration works and i hope you are a better commiter now that you've come this far.

Like my boss would say, leave with a quote to appear smart, i will leave you with this:

"Git commit messages are how we communicate to our future selves."

Happy committing, and may your Git history be forever clean and understandable.

Bye 👋

Survival Mode: Week 1 at Zone01 Kisumu ✅

Silas — Tue, 20 Jan 2026 05:44:28 +0000

The first week is officially in the books. To say it was a "challenge" would be an understatement—it was a full-on baptism by fire.

If there was ever a moment to throw in the towel, this was it. The learning curve was vertical, the bugs were relentless, and the caffeine was mandatory. But we made it through. We might have a few "mental bruises" and syntax-induced scars, but we’re still standing.

I’m finally starting to find my rhythm at Zone01 Kisumu. The road ahead looks intense, but if Week 1 taught me anything, it's that the grind is where the growth happens.

Keep it locked. 🚀

Sabbatical... 😂

Silas — Sat, 17 Jan 2026 13:36:05 +0000

So yesterday, I wrote a test on golang after about 300 days of not touching code.
I was very confident about acing the test and I had nothing to worry about.
Well... 😂
Let's just say, iron rusts when left outside.
Dust accumulates when stuff is undisturbed.

So here I am, back again, to writing code. May the codes be with me... And y'all 💪