Bitcoin and Cryptocurrencies

A philosophical reason behind not to buy Bitcoin

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Tools

HelloWorld

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

step 1:

go to the folder of…


Python Tutorial on Web Development

Part 1: Serialization, Requests, and Response in DRF

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Example 1

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?

Image for post
Image for post

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…


React and JavaScript tutorial on Hooks

We will learn how to use useState Hook in React

Image for post
Image for post

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks allow you to use React without classes. It means you can use state and other React features without writing a class. React provides a few built-in Hooks like useState, useEffect, etc.

When and How to use Hooks?

If you write a function component and realize you need to add some state to it.

  • only call Hooks at the top level of your React function, and it should not be called inside loops, conditions, or nested functions.
  • only call Hooks from React functions, we should not call Hooks from regular…

we will see how to use componentWillUnmount method in React

Image for post
Image for post

This method is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in. This is executed just before the component gets removed from the DOM.

componentWillUnmount() {}

add the following code to student.js

import React, {Component} from 'react';export default class Student extends Component {componentDidMount(){console.log("Student Mounted");}componentWillUnmount(){console.log("App Unmounted");}render() {return (<div><h1>It's Student Component</h1></div>)}}

add the following code to App.js

import React, { Component } from 'react';import Student…

Saranjeet Singh

I write tutorials on Python, JavaScript, React, Django, and CSS.

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