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.
yarn create react-appand install react-router-dom
yarn add react-router-dominto the 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.
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 another tutorial 🙄. So SSR was a big deal until I got to know about Next.js. Next.js is like React js on steroids. …
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 official website here and download the latest version of node and install it on your machine. It’s available for your Linux, Mac, and Windows machine. I am using a Windows environment so all setup and configuration will be as per this environment. I have downloaded the Windows Installer (.msi) 64-bit version for my computer. After completion of download open the software and then it will ask for accepting the agreement and blah blah just click on next and after that, it will prompt you with this screen. …
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.
yarn create react-app yourprojectnamecd yourprojectname
2. Create a component directory and inside that directory create two files coupon.js …
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
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.
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.
npm install Console or
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.