In the following article, we’ve discussed the procedure to create a credit card payment portal using React-router and Context API.

But, in this article, we’ll create the same application using react-router, redux and formik.

Our final application should have the following features —

1. A home page with a button which will take the user to the payment portal.

2. The payment portal page should have a form with a ‘Make payment’ button and following input fields —

• Credit Card Number (mandatory, string, 16 digits)
• Card Holder Name (mandatory, string)
• Expiration Date (mandatory, Date > Current Date)
• Security Code — CVV (mandatory, string, 3…

In this article, we’ll discuss the procedure to create a credit card payment portal which should have the following features —

1. A home page with a button which will take the user to the payment portal.

2. The payment portal page should have a form with a ‘Make payment’ button and following input fields —

• Credit Card Number (mandatory, string, 16 digits)
• Card Holder Name (mandatory, string)
• Expiration Date (mandatory, Date > Current Date)
• Security Code — CVV (mandatory, string, 3 digits)
• Amount (mandatory, number > 0)

3. The payment portal page should also have a button which will bring back the user to the home page. …

According to the official website of Redux, “it is a predictable state container for JavaScript apps.”

The above definition can be broken down into three parts —

1. Redux is a library for JavaScript applications — It is not only for React, but can also be used with Angular, Vue or vanilla JavaScript.
2. Redux is a state container — It stores and manages the state of an application.
3. Redux is predictable — It is possible to keep track of all the state changes.

Redux Concepts

1. State — The state in redux is stored in plain JavaScript object.
2. Action — It is also a plain JavaScript object with a type field that specifies how to change something in the state. …

According to reactjs.org, Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In typical React applications, the data is passed from a component which is present at the top of the hierarchy to the component at the bottom via props. But this approach can be annoying when the props is required by many components within an application.

So, context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

When to use Context?

Context is used when some data, that can be considered “global” for a tree of React components, is to be shared among different React components. For example — data such as the current authenticated user, theme, or preferred language. …

According to Wikipedia, Data are the quantities, characters or symbols on which operations are performed by a computer which may be stored and transmitted in the form of electrical signals and recorded on magnetic, optical or mechanical recording media.

So, data needs to be managed in such a way so that it can produce some meaningful information. And that is why, we use data structures.

A data structure is the systematic way to organize data, so that it can be used efficiently.

Linear data structure — In this type of data structures, all the elements are arranged one after the other (i.e., sequential order). …

In this article, we’ll learn about webpack .

According to npmjs.com, webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

In this exercise, we’ll use webpack to bundle all of our JavaScript into a single, production-ready file.

For that, first of all, we’ll install webpack and webpack-cli globally using the following commands.

npm install webpack -g --save, and

npm install webpack-cli -g --save.

Now we’ll create a directory with the name webpack in our system which will have the following files and folders. …

In this article, we’ll discuss the object oriented aspects of JavaScript language. In our daily life, we come across a lot of objects like Television, Cell phone, Car, Animals, Birds etc. and all these objects have their own properties and methods. For example — John is boy. So, he is also an object with properties like eyes, ears, hands, legs etc. and methods like walking, talking, dancing, eating etc.

Object Literal

We can define or create a JavaScript object with an object literal by encapsulating all the methods and properties within the curly braces and it is shown below-

In this blog we’ll learn about the fs module in node.js. We don’t need to install this module separately, as this is a core module.

To understand the core concepts, we’ll take help of some examples.

Example 1

We’ll create a text file with name myfile.txt with the following data.

Hi there
How are you?

In the same directory, we’ll create another file with name app.js with the following code:

In the above code, we’re reading from and writing to the files synchronously. That means, it will block the execution of other codes while reading and writing.

The above code will give create a file with the name newfile.txt in the same directory and copy all the data from myfile.txt to it. It will also give the following output into the console. …