It always fun to explore and try out the various extensions.

I always had the habit of trying out new themes for my code editor.

VS Code is my all-time favorite editor. I will switch to different themes or color schemes at least once a week or multiple times in a day.

Recently, I and a few friends exploring the extensions of vs code.

Then, we suddenly we came across a cool extension

Setting your code on fire

Yes, just how I wish to mention this extension. The actual popular name is POWER MODE.

What’s new?

This isn’t new.

It’s available…

How to install React on your development computer

How do you install React?

React is a library, so saying install might sound a bit weird. Maybe setup is a better word, but you get the concept.

There are various ways to setup React so that it can be used on your app or site.

Load React directly in the web page

The simplest one is to add the React JavaScript file into the page directly. This is best when your React app will interact with the elements present on a single page, and not actually controls the whole navigation aspect.

In this case, you add 2 script tags to the end of the body tag:

One React hook I most often use is useState.

import React, { useState } from 'react'

Using the useState() API, you can create a new state variable, and have a way to alter it. useState() accepts the initial value of the state item and returns an array containing the state variable, and the function you call to alter the state. Since it returns an array we use array destructuring to access each individual item, like this: const [count, setCount] = useState(0)

Here’s a practical example:

import { useState } from 'react'const Counter = () => {
const [count…

create-react-app is a project aimed at getting you up to speed with React in no time. It provides a ready-made React application starter, so you can dive into building your app without having to deal with Webpack and Babel configurations.

It provides out of the box:

  • a development server with hot reloading
  • provides a testing environment with Jest
  • allows building the React app
  • ready for ES6+ syntax
  • bundles all your JavaScript and assets
  • comes with CSS autoprefixer, SASS and CSS Modules support
  • and more!

You start by using npx, which is an easy way to download and execute Node.js commands…

Forms are one of the few HTML elements that are interactive by default.

They were designed to allow the user to interact with a page.

Common uses of forms?

  • Search
  • Contact forms
  • Shopping carts checkout
  • Login and registration
  • and more!

Using React we can make our forms much more interactive and less static.

There are two main ways of handling forms in React, which differ on a fundamental level: how data is managed.

  • if the data is handled by the DOM, we call them uncontrolled components
  • if the data is handled by the components we call them controlled components


Learn how Hooks can help you build a React application

Hooks is a feature that will be introduced in React 16.7, and is going to change how we write React apps in the future.

Before Hooks appeared, some key things in components were only possible using class components: having their own state, and using lifecycle events. Function components, lighter and more flexible, were limited in functionality.

Hooks allow function components to have state and to respond to lifecycle events too, and kind of make class components obsolete. They also allow function components to have a good way to handle events.

Access state

Using the useState() API, you can create a new state…

Prafful Indirala

I create easy to digest Front-end related articles here.Yo'll find me writing about everything from JavaScript basics,to larger framework and library tutorials.

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