Image for post
Image for post
https://waftengine.org/public/blog/1B5EE4D5D773F8A-RR.jpg

In this article, we’ll create a simple react application where we’ll use redux for state management. The final look of this application is shown below —

In this exercise, we’ll use combineReducers() of the redux library which combines multiple reducers into a single reducer.

Initial setup

First of all, we have make sure that Node.js is installed in our system. If so, we’ll create a directory with name React_Projects and then, we’ll open the terminal and navigate into that directory. There, we’ll run the following command…


Image for post
Image for post

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.

  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…


Image for post
Image for post

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. …


Image for post
Image for post
redux.js.org

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

  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.

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. …


Image for post
Image for post

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.


Learn Node.js (Part 7)

Image for post
Image for post
Photo by Safar Safarov on Unsplash

In this article, we’ll learn about webpack .


Image for post
Image for post

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-


Learn Node.js (Part 6)

Image for post
Image for post
Photo by Safar Safarov on Unsplash

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.

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.


Image for post
Image for post

In this article, we’ll create a responsive To-Do list application in which we will be able to add our tasks and delete all of them.

To understand the basics of React in a simple way, please visit this article.

The code for this project is also available in my GitHub repository.

Now, let’s dive into the project.

Initial setup

First of all, we have make sure that Node.js is installed in our system. If so, we’ll create a directory with name React_Projects and then, we’ll open the terminal and navigate into that directory. …

About

Souvik Paul

You can also follow me on LinkedIn -https://www.linkedin.com/in/souvikpaul-plus/

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