JavaScript tutorial on Web Development

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

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

• NPM
• Node.js
• Web Browser
• React-developer tool
• VS code text editor

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

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

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

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…

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()…

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

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…