Today I came up with a tutorial on how to create a multi-step form in React. This is just a simple multi-step form built using react-bootstrap and validator. I created this in my free time to help beginners, don't expect it to be fancy or rich in styling because I have used just simple form components from react-bootstrap and simple validation check from the validator module. So let us start the tutorial.

  1. Create a simple react application
yarn create react-app multistepform

2. Install some required modules.

yarn add react-bootstrap bootstrap validator

I have used react-bootstrap for creating forms you can…


Recently I was working on a project where I have to create a bill with some strings encoded in the barcode. I looked for some libraries and came across vue-barcode by Lindell. But my bad it was only supportable for vue v2 and I was getting createElement is not a function error on Vue 3. I checked the source of the code and found that Lindell is using its own library jsbarcode which is quite a famous library for generating barcodes on different platforms. So I modified some of the vue-barcode library code to make it compatible with Vue 3…


We all know that Quasar is a great library built on top of Vue.js. The best thing I like about Quasar is that it can easily create apps or websites for different environments like Android, iOS, Windows, Linux, etc.

Today, I’ll show you how to easily create a QR code scanner in Quasar. This tutorial can also be useful if you want to build a QR scanner in Vue.js. So let us start with the tutorial.

Requirements

  1. Start with creating a quasar project.
quasar create appname

2. Now we will install the vue-qrcode-reader to our quasar project.

npm install vue-qrcode-reader


I was working on a project and the client asked me for functionality to block some IP addresses. The client will create a list of IP addresses that need to be blocked on the front end. I was a bit confused as React js is a frontend framework and there is no way I can get the IP address of the users using a frontend framework. After some time I found a website which on visiting can give me the user IP address in JSON format. So I thought why not create that functionality using this site. …


Today I have come up with a tutorial on how to set up multilingual on react js using the i18n module. The react-i18next module is a widely used module available for multilingual setup on react js and also for react-native. So let us get started on how to use that module in our project.

Requirements

  1. Create a react project.
npx create-react-app yourprojectname#oryarn create react-app yourprojectname

2. Now install react-i18next and i18next packages in your project.

npm install react-i18next i18next#oryarn add react-i18next i18next

3. Now create an i18n.js


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.

  1. Create your react project yarn create react-app and install react-router-dom…


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

  1. Create a react project.
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

  1. Create and open your React js project.
yarn create react-app yourprojectnamecd yourprojectname

2. Create a component directory and inside…

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