Lately, I have been trying to learn more about React hooks. In addition to learning about them, I am trying to implement them as well. The new hooks I have been learning and using is the useRef hook. useRef hook is usually used to reference underlying DOM elements like input fields. It can also be used to store variables as well. The difference between storing variables with useState and useRef is that when mutating the variable that was declared by useRef, it doesn’t trigger a component re-render. That means DOM does not get affected. It’s a nifty way to track…

For a recent job interview, I had to write an app using React, that calls to an API and gets data, and then renders it. The data that was coming back from that particular API was needed to be fetched page by page, and I used pagination in my Frontend to break it render them accordingly. But then I decided to implement Infinite Scroll instead of pagination since I have never done it before and wanted to learn how to implement it. In this post, I will share how I implement an Infinite Scroll in a React component.

First, I…

For a recent project, I had to make a Sidebar Navigation. I wanted to try out the react-pro-sidebar library and this seemed like a great opportunity for that. In this post, I will explain how I achieved the required sidenav using the react-pro-sidebar library.

First, I created a new app using create-react-app:

npx create-react-app react-sidenav-demo

Next, I installed the required library for the project:

npm i react-pro-sidebar react-icons

Next, in the src folder of the project, I created a folder called components. Inside the components folder, I created a component called Sidenav. The file structures looked like this:

In the…

To have a better understanding and have more control over the configuration, I wanted to learn how to configure a react app manually using Babel and Webapck. This is beneficial when developing a large-scale app. create-react-app bootstraps the react app with Babel and Webpack makes it easy but in this post, I will demonstrate how to configure Babel and Webpack from scratch.

First, I made a directory for the project and initiate the project using npm.

mkdir my-app
npm init -y

This created a package.json in the folder. After that, I decided to configure the Webpack. Webpack is a tool…

For a weekend fun project, I decided to build a recommendation app using React for the front end. As I was progressing through I decided to try and integrate the ability to get the user’s location in order to show better recommendations based on the user’s location. In this post, I will show how I used Geolocation API to get the user locations from the react app.

For the purpose of this post, I created a demo app using create-react-app and after it finished generating the project, I went into the app.js and deleted all the boilerplate code.

To get…

I mean why not, right? Although for me it was more like staying in touch with React. Since I started working as an intern, I have been working solely on Angular and to be honest, I was missing React. So I decided to do a fun little project in React just to keep me sharp and familiar with the React scene. I decided to build an IDE like Codepen, just a simple clone and it was fun trying to achieve that goal. …

Recently for work, I have been working with Angular. Coming from a React background, there is a bit of a learning curve. But I am having fun exploring Angular. This week I have learned and implemented an option to change the default theme of an Angular app between light and dark theme. In this post, I will explain how I implemented it using Angular Material.

For the demo purpose, I quickly generated an app using Angular/CLI and added angular material to it.

ng new dark-mode-demo
ng add @angular/material

While choosing the theme for Angular Material, I chose SCSS instead of…

After finishing Flatiron School’s Immersive Software Engineering Curriculum, It was time for me to get out there and get my presence heard. One of the ways was to build a personal portfolio site. I’ve decided to build one from scratch, using React, without any template, as I thought it would help me showcase my skills in React. I am glad I took that decision, It was really fun to build something so personal from the ground-up. After it was finished though, I had to upload it somewhere and make it live for me to promote it to potential employers. After…