In this article, we’ll discuss about creating a simple visitor’s register application using TypeScript, in which we’ll be able to make a list of people checking in and out of the premises.
The final look of this exercise is given below:
Initial setup
To use TypeScript, we have to install the TypeScript package using NPM. For that we will run the following command in the terminal.
npm install -g typescriptWe are installing the package globally into our system.
After that we’ll create a directory with the name practice, where we’ll write codes for learning TypeScript.
In the project directory, we’ll…
TypeScript For Beginners
According to https://www.typescriptlang.org/,TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.
Browsers, by default, do not understand TypeScript. After writing TypeScript code, we have to compile it into JavaScript in order for browsers to understand it.
TypeScript allows us to use types. If we declare a variable in TypeScript to be of certain type (say number), then we can’t change that number type later on to string, boolean etc. It makes our error checking process and debugging of our code a bit easier. …
In this article, we’ll develop a simple note-taking application using HTML, Bootstrap, and Vanilla JavaScript, in which we can add, delete and search for our notes. The notes will be stored in the local storage of the web browser and they will not be deleted even if the browser is closed. The application will also prevent HTML and script injections via the input field.
After completing this exercise, our application will work as follows —
Now, let’s dive into this exercise.
First of all, we’ll create a project directory with two files — index.html and script.js.
The index.html file…
JavaScript is a single-threaded language. That means, only one line of code can be executed at a time and all the codes are executed one after the other.
But there are certain situations in which a line of code needs to fetch data from the database or any other APIs, which takes time. In these situations, the execution of subsequent line of codes will get blocked. They will only be executed after fetching the data. And this is not a good experience. So, to counter this situation, we have asynchronous codes in JavaScript. Asynchronous codes do not block the subsequent…
In this article, we’ll develop a React application which will fetch data (page by page) from the following API — https://jsonplaceholder.typicode.com/photos and will display them on the browser in the form of a table. When the application is opened in the browser, it will display the contents of the first page and upon scrolling, the application will load and display the subsequent pages as well. The final look of the application is shown below —
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…
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().
Initial setup
First of all, we have make…
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 —
- 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…
In this article, we’ll discuss the procedure to create a credit card payment portal which should have the following features —
- 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…
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 —
- Redux is a library for JavaScript applications — It is not only for React, but can also be used with Angular, Vue or vanilla JavaScript.
- Redux is a state container — It stores and manages the state of an application.
- Redux is predictable — It is possible to keep track of all the state changes.
Redux Concepts
- State — The state in redux is stored in plain JavaScript object.
- Action — It is also a…
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…
