Programming, Front-end, React

How to use spread operator and hooks to work with forms in React

In the previous tutorial, we went through the basics of React and how to use hooks to alter states. This tutorial will continue from there and here we will see how to use hooks to update forms in React.

However, before moving forward, I want to cover a topic that will be used in most of the React app you going to build. And that topic is spread, operator.

Suppose you have an array of numbers, arr1 and you want to add 5 to this array without affecting the arr1 array.

const arr1= [1,2,3,4]

now you want to add 5…


Programming React and Front-End Development

A detailed explanation of the fundamentals of React Component and how to use props and state to make a functioning app.

According to the official definition of Component in React:

Components let you split the UI into independent, reusable pieces and think about each piece in isolation.

Components can be treated as sections of the overall web page. The navbar, main content, footer, etc, all can be converted to individual components. Even parts of components can be further divided into components. The purpose of the component is to let one unit perform one individual task and the whole web page then works in a coherent way. Without components, you can use jQuery to target a particular element in the DOM. …


Bitcoin and Cryptocurrencies

A philosophical reason behind not to buy Bitcoin

It is not financial advice. I myself have $57 worth of Etherium and maybe BTC 0.0019 locked in my PC because I forgot the password of my Bitcoin wallet. I bought these Bitcoins probably in 2016, just for fun, and didn’t bother to write down the password. I can see them on my PC but can’t do anything with them.

If you ask me, I would not advise you to buy Bitcoin for the same reason I will not ask you to buy a lottery. …


JavaScript tutorial on Web Development

Part 2: Learn how to pass props in a React App

In our last tutorial, we studied the functional component. We learned how to create functional components and how JSX works inside of it. Today, we are going to learn about props. You will use props a lot in ReactJS and it is necessary to understand what they are and how they work.

Create a new app by typing the following command in the terminal.

$ npx create-react-app props-example
$ cd props-example

Create a new folder in the src and name it ‘components’. The whole point of React is to make it easier for us to create the front-end of the…


React and JavaScript tutorial

Part 1: We will study how functional components work in React

React is the most famous library in JavaScript and its demand growing pretty rapidly in the last few years.

Environment Setup

We will be using the VS studio code editor and MAC operating system. If you are using any other operating system, for the most part, you won’t face any difference. The only difference is installing some of the packages, so just go to the respective documentation and you should be good.

HelloWorld

After installing node and npm, we are ready to write our first code.

go to the folder of…


Python Tutorial on Web Development

Part 1: Serialization, Requests, and Response in DRF

To start a project, please type the following commands in the terminal ( please see my first tutorial on Django to initialize the virtual env and project setup ).

(env) Mac:back-end saran$ django-admin startproject ecom(env) Mac:back-end saran$ cd ecom/(env) Mac:ecom saran$ django-admin startapp home


Redux Tutorial

Learn Redux with the Bank analogy

This is a reference to a great book Understanding Redux by Emmanuel Ohans. You can follow the link and get the book. The event described in a book which can be understood very easily by any 5 years old goes something like this.

Consider someone who has given you a task to get some money out of a bank. The intention ( action ) you have in your mind is to withdraw money from the bank. In JavaScript, we can represent it as WITHDRAW_MONEY. The first step when you enter the bank is to talk to a cashier and ask…


Javascript React Redux Tutorial

Redux pattern, Immutability, and Pure Functions

In this tutorial, we will introduce the core concepts and principles to use Redux in your app.

According to the official website, Redux can be defined as:

Redux is a pattern and library for managing and updating application state, using events called “actions”.

Redux is a centralized store where each and every component can access the state of the application. Redux helps to manage the global state and this state is needed across multiple parts of the application.

function Counter() {
// State: a counter value
const [counter, setCounter] = useState(0)
// Action: code that causes an update to the…


useEffect method hook is used for operations like fetching data from an API.

By using this Hook, you tell React that your component needs to do something after rendered the component. React will remember the function you passed and call it later after performing the DOM updates. In this effect, we set the document title, we could also perform data fetching or call some other imperative API.

In the future when we will fetch data from an API, if we are using functional-based components, we will need to use useEffect hook. Let’s see an example of how it works.

Add the following code to App.js

import React, {useEffect, useState} from 'react';function App()…


How more choices can help us to find our true calling?

Finding passion is so hard that most of us couldn’t find it. It’s so awkward nowadays to say that we don’t have a passion for something. Maybe because with the help of the internet, people turned their passions into money-making machines. Those who could dance, became an online choreographer, those who were crazy about filmmaking became vloggers.

And the rest of us couldn’t find our passions and we got stuck at 9–5. So, to have a good life, we must need passions? I would say we should start with choices. We should try more things ( even random ) as…

Saranjeet Singh

I write tutorials on Python, JavaScript, React, and Django. I write for InPlainEnglish and TheStartUp .

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