Active class is required if you want to highlight the page name in the header on the current page. There are two ways we can use to add active className to the link. In this tutorial, I’ll show you all the different ways you can use to do that. So let us get started.

We will first set up our project with react js and react-router-dom. If you don’t know how to do that please read my previous tutorial on How to use React Router in your React js project.


Do you need a sidebar navigation menu for your next React.js project? Here I came up with a tutorial on how to create a sidebar menu in React js. Yesterday I was working for one of my clients and his design requires me to create a sidebar navigation menu that can also collapse. So let us see how I created that menu.

Requirements

npx create-react-app#oryarn create react-app yourprojectname

2. Follow the below diagram to create our folders and file structure.


Working with react js is fun until you have to do some SSR (Server Side Rendering) or SEO (Search Engine Optimization) for your application. When I created my first application in React js I got into a problem with SSR because my backend was in WordPress. There wasn’t much information on how to do SSR with PHP in the backend at that time. SSR is required to do SEO for your application and there wasn’t any chance to do that with a PHP application so I end up generating static HTML for my React application. I will cover that in…


So are you also confused like most of the MERN beginners on how to create your first MERN project? and also how to setup the environment for your project? Even I was also confused when I created my first MERN project. I wanted to setup everything locally on my computer but there was hardly any tutorial for setting up the MongoDB locally everyone was using MongoDB atlas. But in this tutorial, I will cover how to use MongoDB locally and also how to structure our project.

We will first start with installing Node js on our machine. Visit node js…


Sometimes we need to customize the right click for triggering some events in our application. The context menu can be useful for sites like a video blog, coupon listing for adding right-click options to play video, copy coupons, share on social media, etc. So in this tutorial, I’ll show you how to add a context menu to your React application. Let us get started

We will build a simple coupon which on right-click will show a context menu.

Requirements

yarn create react-app yourprojectnamecd yourprojectname

2. Create a component directory and inside…


In this article, I’ll show you how to create a comment remover that will strip all single and multiple comments from all your JavaScript files. Whenever we work on a project we create some single line or multiple line comments for understanding the necessity or usability of the current code. These single line or multiple line comments are good during the development phase but not suitable for production as this can increase the size of the files.

I know the increment in the size of the file is very tiny. We basically work on a small project and the small…


Did you ever tried using localStorage in your node js project and got an undefined error? Of course, you will get an undefined error because node js is a server-side technology and localStorage is a client-side feature available only in the browser. But still, there are some libraries through which you can use the localStorage like feature in your node js project. So let us see how to use them.

For tutorial purposes, we will first create a simple node js project and then will see how to use those libraries one by one.


Do you use conosle.log() or console.table() to print your arrays and objects in a JavaScript project? Yes, we all use that but the way I have to open multidimensional arrays or objects in the console is kinda boring to me. I use an npm library to view all my arrays and object in a tree-like structure. This way I can clearly see all my arrays with the index and also the hierarchy of my objects. So let us see in this tutorial how to use that library for our next JavaScript project.

This tutorial assumes that you're creating your next…


If you are a JavaScript developer you must be using console.log() for debugging your JavaScript project. But do you know that there are some alternative libraries to console.log() . These libraries can be used in your next Node, React, Angular, or Vue projects. So let us see what are those libraries and how to use them.

1. Console

Console is a lightweight library that can be used as an alternative to console.log() . The best part about Console is that apart from supporting warn, info, log, or error method it also supports success, debug, and stress method.

Usage

Install : npm install…


I have come with a tutorial that covers the configuration of Eslint and Prettier in visual studio code for React js development. Errors are a major problem in our usual react js development. This frustrates users while writing code.

When I started using react for my projects I never used eslint or prettier for the development. I still regret that because linting is important for development as it reduces error and improves the overall quality of the code and prettier helps us formatting our code. So let us see how to configure that for your next react js project.

Manish Mandal

Fullstack developer with expertise in WordPress and React. Writing code for humans. Add me on Linkedin https://www.linkedin.com/in/manishmandal21/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store