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.
According to the official documentation, As our application grows and becomes more complex, we can have multiple reducers each managing independent parts of the state. The combineReducers()
helper function turns an object whose values are different reducing functions into a single reducing function that we can pass to createStore()
.
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…
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 —
2. The payment portal page should have a form with a ‘Make payment’ button and following input fields —
In this article, we’ll discuss the procedure to create a credit card payment portal which should have the following features —
2. The payment portal page should have a form with a ‘Make payment’ button and following input fields —
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 —
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.
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.
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.
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. …
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.
The final look of this project is shown in the following videos.
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.
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. …