DEV Community: Silas

Understanding Components and Props

Silas — Wed, 03 Jun 2026 14:00:54 +0000

What are Components
- Exporting functions and components
Props
- Props as functions
Exercise

Hello again. If you are reading this, you are interested in React. This is the second in the React Introductory series. Check out Introduction to React if you haven't.

Let's continue ...

What are Components

These are, ideally, the smallest building blocks of a page or user interface. They include buttons, input boxes, radio buttons and check boxes etc.
These are what make up a page and are used for data input and user interactions.

Components make use and/or take the syntax of html elements. The html elements include:

<div></div - creates a container
<input type="text"/> - creates an input box
<button>Button</button> - creates a button
...
and so on.

React components, are generally created or defined inside a .jsx file. The definition(or component) must subsequently be exported to make it usable and accessible across the entire app.

In React basic structure, components live inside App-folder/src/components folder.

So, go ahead and create a button component in the component directory. Create a file Button.jsx or whatever you decide to call it, but remember to add the .jsx extension, to tell the compiler that this is a React component.

Inside this file, add the following:

function Button(){
   return(
    <button>I am a Button</button>
)
}

Notice that we did not start with import react from "react".
As from react 18, this has been automated, and the compiler will automatically(behind the scenes), import this package thus allowing you to continue without that particular import directive.

You have now written your first component. However, we are not done yet. Trying to use this will throw an error. But why??
You guessed it right. EXPORT!! We have not exported the function/component.

Exporting Functions and Components

There are 2 ways of exporting. You can:

Export as you define the component
Export once you are done defining

The only difference between the two is the placement of the export keyword.

export function Button(){
   return(
    <button>I am a Button</button>
)
}

function Button(){
   return(
    <button>I am a Button</button>
)
}

export Button

The above definition is what we call React Function component. There is another definition that uses Arrow Functions.
The layout of an arrow function component looks like this:

export const Button=()=>{
   return(
    <button>I am a Button in an Arrow function</button>
)
}

const Button=()=>{
   return(
    <button>I am a Button in an Arrow function</button>
)
}

export Button

Both definitions of arrow function and native function have slightly different syntax, but the two will give the same expected output

We have now written and exported our first component. To see it in action, open our App.jsx.

To use a component in another component or page, you will need to import it.

import {Button} from "./components/Button.jsx"

function App(){
 return(<Button/>)
}

export default App;

Now save and run npm run dev and open http://localhost:5173 and see our button.

When do we do import { Button } from "./component" and when do we do import Button from "./component"?
TODO : Read about Exports here and be able to tell the difference

Props

Props is short for properties. These are characteristics or definitions unique to an element. Just like attributes in html, props are used to pass data between elements in a page.
Props are passed into a jsx element as arguments of a function.

function Button({onClick,color,width}){
 return(
  <button/>
)
}

Props can be of any data type: e.g string, boolean, number, object or even functions.

But why ({onClick}) instead of (onClick) ??
Well, Every JSX has a default object property attached to it. So when you pass in a property, the property becomes a field in that object.
{onClick} - this uses destructuring to get the actual props

(props) - this uses renames the default props to the name given. To access the actual props, you will have to do props.onClick,props.color and so on.

Props are useful to send data from parent component to child and from child to parent.

It is worth noting that passing a prop from one element to another will be detected by react, and if that prop changes, react will trigger a re-render. When components are deeply nested and one prop has to make way down to n-th level, when the prop is passed from parent to n, this is what would be termed as PROP DRILLING. This causes unnecessary rerenders.
One way to fix this is by using a global store that elements and components can directly access without depending on other components

Let's see these in action:
Create a Car.jsx component in components folder

export const Car=({color,make,model})=>{
    return(
        <span>{make} {model} - {color}</span>
    )
}

import { Car } from "./components/Car.jsx"

function App(){
  return(<Car make={"Toyota"} model={"Tacoma"} color={"Silver"}/>)
}

export default App

Running this should give you something like this:

Props as functions

Let's go through this example. We will, for this one call a function that is residing on the parent from the child.

So, defined our component.
Our component receives a destructured prop,onClick, from the parent.
Our button has an onClick attribute. This defines the event that happens when the button gets clicked. In this case, the onClick will be called.

export const Car=({setClick})=>{
    return(
        <button onClick={setClick}>
    )
}

Now, in the parent component, in our case, App.jsx, we define the function that will get executed when the button in the child component will be clicked.
setClick prop is now set to handleClick function, and this should trigger a console.log("Clicked), which should display a "Clicked" message on the console.

import { Car } from "./components/Car.jsx"
function handleClick(){
   console.log("Clicked")
}
function App(){
  return(<Car setClick={handleClick}/>)
}

export default App

You have successfully passed props between parent and child and executed parent functions from child component.

TODO: Create a child component with a button that will increment a counter on the parent.

Assuming you have done the above, let's go through it.
Create a button component like we did above:

export const Button =({onClick})=>{
     return(
          <button onClick={onClick}>Increment</button>
     )
}

Then in our App.js, let's import and add the button component:

import { Button } from "./components/Button.jsx"

function App(){

function increment(){
   //increment logic will go here
}
  return(
        <div>
          <p>Count:</p>
          <Button onClick={increment}/>
        </div>
     )
}

export default App

Now we will introduce a state manager, useState, to keep track of our state 'count' and rerender the component on change.

import { useState } from "react"
import { Button } from "./components/Button.jsx"

function App(){
//create our state variables
const [count, setCount] = useState(0)

function increment(){
   //increment logic will go here
}
  return(
        <div>
          <p>Count: {count}</p>
          <Button onClick={increment}/>
        </div>
     )
}

export default App

The 0 in useState(0) tells the compiler that count is of type number and the default value is 0. Default values can include objects, strings, booleans, pretty much any data type.

From our previous lesson, you remember how to set state. We want to change the state value everytime the button is clicked.

function increment(){
   setCount((prev)=>prev+1)
}

Now, save everything and run your server.
You should get a Count: 0 and a button Increment. Clicking the button will increment the count value.

Congratulations!! You have used state, passed props and exported components.
Now do the exercise below to challenge yourself even more.

Exercise

Exercise: Create a color changer. A box and an input field. The box will change color to the color specified in the input field.(This introduces you to CSS styling of components as well as what we have gone through).

Happy hacking, see you in the next one!!

Getting Started with ReactJS

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

Installation
JSX Basics
useState
useEffect

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 O
NCE 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.

Check out Understanding Components and Props to continue with your journey

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 💪