When I stumbled upon React, I barely had any JS knowledge. I had been told by my peers and the internet, of course, that some JavaScript knowledge would be necessary to start with React JS, but, I took the chance. Belonging to the kind of people that “learn by doing” , I went on to explore the JavaScript world and JSX that comes with React.

Image for post
Image for post
Cover image.

This is for beginners and people who are the same kind.

1. Strict Mode

I was unfamiliar with this concept and it took me some time to understand what was happening when I observed this weird behaviour —

Inside App.js …


It will make your lives easier

1. Learn about Server side rendering (SSR)

Image for post
Image for post

Okay, so when I say Server Side rendering, I also mean quite a few things related to it. For instance, NodeJS and webpack.

You obviously wouldn’t bother rendering your react app server-side as a beginner when you’re still figuring out how react works and it’s fine. All I’m saying is, you should at least have an idea about what it is and why it is important, so that when you go for your next internship and their server side rendering their app, you are not clueless.

If you are reading about server-side rendering, you’d also come across some server side code and terms like bundles, build process, etc. It’s important that you pay attention to these things because knowing about these will help you a lot in the long run. …


Image for post
Image for post
Photo by Tatiana Rodriguez on Unsplash

You have probably used the useRef hook to access DOM nodes.

If you search for articles on ref, this is the most common example you’d find

import React, { Component, createRef } from "react";                                               class CustomTextInput extends Component {                              textInput = createRef();                                                      focusTextInput = () => this.textInput.current.focus();                                                  render() {                          
return (
<>
<input type="text" ref={this.textInput} /> <button onClick={this.focusTextInput}>Focus the text input</button> </>
);
}
}

The above example shows how you’ll use refs if you have a class component.

If you are using functional components, this is the approach you’ll take to achieve the same…


How I kept scratching my head over one simple feature.

Image for post
Image for post

I started learning flutter a month ago. While I was making good progress, I got an opportunity to work with a friend on a project which managed state using the provider package. I was excited because I finally had the chance to work on a real flutter project and learn state management using provider. I started with something simple: a Navigation Provider. I wanted to handle navigation inside the app using the provider pattern.

Everything was working fine until my inquisitive mind started wondering about performance. At this point, it wasn’t even reasonable to think about performance. But I had to find answers. So, I skimmed through this article and read about the best practices when using provider, to keep the performance satisfactory ( By the way, performance here meant, preventing unnecessary building of widgets.). …


Using Firebase and react-router to create protected routes in a react app.

Image for post
Image for post
Photo by Thomas Jensen on Unsplash

One of the most common requirements in web apps is to prevent unauthorized access to certain routes. For example, you may need to allow only signed-in users to visit the /profile route in your app. This task may seem daunting to beginners.


Using React’s Context API and hooks to perform routing.

react router
react router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes. Recently, while working on a project I decided to use a custom solution to handle the routing, using the Context API and hooks. …

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