React Responsive Carousel Image Gallery with Thumbnails Tutorial

In this React 16 tutorial, we’ll implement the Carousel component to create a responsive touch-friendly fully-features image or content carousel.

Image Sliders or Carousels are used to represent the number of items in the form of simple graphical images, HTML content, or media files like videos.

Today we are going to implement a powerful yet lightweight package module to easily create an Image responsive carousel using react-responsive-carousel. It supports a number of features like AutoPlay, Infinite loop, Thumbnails, Horizontal or Verticle direction play, Animation, etc.

Read more

Ionic React | Adding Barcode QR Code Reader Generator App Example

In this tutorial, we will learn How to implement Barcode or QR Code reader and generator in Ionic React application using Native plugin.

Using Ionic Frameworks Native plugin we can easily scan or generate QR codes. In the previous tutorial, we have already discussed its implementation in Ionic application based on Angular framework.

But here we will discuss how to use Barcode/ QR code reader in React application.

Read more

React Stripe Payment API Integration using react-stripe-checkout Example

Stripe is a platform that allows us to handle online payments which doing from scratch is an extremely lengthy process. It also adds automation for logistics and handling payments and support for multiple modes and in any currency.

Adding Stripe in a React project is very easy and needs almost no coding for a checkout button. It simply adds a button and takes amount needed to pay, then takes in user payment details and done!

For using Stripe you need to create an account which is free to use for development and integration in test mode. After that, you can buy a secret key later which is used for handling real transactions.

Read more

React Sign In using Firebase Google Authentication

ReactJs Sign-In forms Integration with Firebase services to enable a user to sign-in using Google Authentication. We are focusing on how to make them work with a perspective of a real-world large project.

Firebase is a group of powerful services that are provided by Google. It is consists of many awesome features that can be used for testing, no-SQL databases, Social and non-social authentication, machine learning, hosting etc.

In this tutorial, we will only have a look at Firebase integration with ReactJs application and Google Authentication.

Read more

ReactJs Sign In Form Example Tutorial | Part 1

In this article, we will learn how to create a simple but highly reusable Sign In form in ReactJs application. Our Sign In form will have custom components for Input and Button elements.

The input fields in our Sign In form will be of a floating type having focus transitions to move label name animating to the top when user focus in the field control.

This is the first part of the tutorial, in the second part we will learn How to integrate Firebase Google Authentication and Firestore database. It will save user information after signing in using Email/ Password or Google auth to Firestore database.

Read more

React Router Dom v5 | Adding routing in React app tutorial by example

React application needs to include a routing library to add routing capabilities. In this tutorial, we will learn How to add React Router Dom library in a React app to switch between multiple components.

The react-router-dom is a popular and well-supported library available which is the most preferred routing library for React applications due to number fantastic features with ease of implementation.

Read more

Reactstrap | Add Bootstrap UI components in React using Reactstrap

In this React tutorial, we’ll discuss how to quickly start using Bootstrap UI components in a React JS 16 application by integrating the Reactstrap.

We all know the power Bootstrap UI components provide to a developer in quickly creating a robust and fully responsive web application without any head-scratching efforts.

The bootstrap framework takes full control over front-end application and makes it look beautiful, user-friendly, multi-screen and device-oriented. With a number of ready to use UI components and back of awesome grid layout, we can easily create well-aligned structures layouts on pages in a snap.

React is one of the topmost used UI frameworks which works deeply using Javascript on the front-end application. React uses modular principle, which breaks large components into smaller modules. That’s why React applications are more memory efficient and provide an optimized solution for complex application architectures.

Read more

ReactJS | Create ToDo Application in ReactJS using Class Components

ReactJS is a powerful library to build robust applications with the help of manageable and reusable components. React renders application without using any HTML templates which improves application performance many folds. In class components of ReactJS, we use JSX which is JavaScript with XML.

React maintains a Virtual DOM which is React Element, converted from JSX and a Real DOM element which is visible to the user on the screen.

Read more