ReactJS released a major feature in its 16.8 version, where the functional component will act more like a class component. If you are worried about not able to use the component state or life cycle methods in the functional components, now you can do it with react hooks.

The goal of react hooks is to cover all use cases for classes as soon as possible, however, there are no hooks that are equivalent to the uncommon getSnapshotBeforeUpdate, getDerivedStateFromError and componentDidCatch lifecycles yet, but maybe in future releases?

Few FAQs before we dive deep into various react hooks.

Q. Which versions…


As a developer, we use the developer tool a lot, either to debug the code or to execute a Javascript function or while preparing for an interview to answer How do you use the developer tool effectively?

There are a few amazing things that you should know.

Let’s learn a few of these powers of chrome developer tool that helps you program easily, debug your code faster and do more than just debug.

Did you know you can take a screenshot in chrome dev tool !!!? Keep reading if you want to learn.

To open a chrome developer tool you…


Ecma TC39, the committee which handles making ECMAScript better and easy to use; has come up with many specifications that help JS community to evolve.

TC39 process has five different stages to get the specification live.

  • Stage 0: Strawperson — to allow input into specifications
  • Stage 1: Proposal — make the case for the addition, describe the solution and identify the potential challenges
  • Stage 2: Draft — describe the syntax and semantics using formal spec language
  • Stage 3: Candidate — states that further refinement will need feedback from implementations and users
  • Stage 4: Finished — states that the addition is…


Progressive Web Application

Before we jump into some code, let us see a few good things about PWA.

PWA (Progressive Web Application) is getting known day by day for its great features and for a native app like behavior when it is really a web app.

PWA has many features that make it different from other conventional application development and interests many developers to learn more about it.

  1. Responsive and Compatible to different browsers
  2. Can render a web page when it’s offline or in low network quality
  3. It works on HTTPS, making it more secure and reliable
  4. A native app-like interface and easy…


Been using react for past two years now, I have learnt few things which are surprising, and also very useful. Below are some tips that might be helpful to understand few concepts in react.

  1. Understanding this.setState
ExampleComponent.js

As shown above, this.setState has few important features in it. It has access to its previous state, props, has an optional callback function, and re-renders the component after the state is updated.

Use these whenever required, also remember there is an optional callback function which will have an updated this.state


In my previous stories I have explained how to create an express server and a starter kit for a vue app with many adorable features. In this article let’s see how easy it is to integrate and use vue-router.

Check this GitHub project for example

Prerequisites

  1. Starter kit with VueJS, VueX, Router, Webpack, Vue-bootstrap and ExpressJS

Let’s Begin !!

I assume we are ready with our prerequisite stated above (if not, that’s fine, just read along to understand how to implement vue-router)

vue-router: Vue Router is an official router for Vue.js, we can also handle routes in server side by…


Want to create a production web application using awesome libraries/framework like VueJS, VueX Webpack, Router, ESLint, Vue-bootstrap and ExpressJS???

continue reading then…

Prerequisite:

  1. Knowledge about Node, installing packages, NVM and using any IDEs.
  2. Basics of JavaScript (ES5 or ES6+)
  3. Creating a node client using expressJS

A brief introduction of what each of these means:

VueJS: The progressive JS framework which is Approachable, Versatile and Performant.

VueX: VueX is a state management pattern for medium or large scale SPA inspired by Flux, Redux, and The Elm Architecture. Its implementation is tailored specifically for Vue.js for its reactive nature.

Router: Vue Router…


It’s important to know the basics of creating a node client when you are interested in learning front end technologies. This article helps you create a simple Node JS app using express.

Let’s Begin!!!

Prerequisite:

  1. Knowledge about Node, installing packages, NVM and using any IDEs.
  2. Basics of JavaScript (ES5 or ES6+)

Initial steps before we get into creating a client and apis:

Open your Terminal/Command Prompt and create a project folder

mkdir express_democd express_demo

Initialize npm, this will ask you few details about your project that will be updated in package.json file. …

Prashanth Naik

Senior Frontend Engineer at AWS. prashanthpnaika.com to learn more.

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