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.

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 —


It will make your lives easier

1. Learn about Server side rendering (SSR)

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…


Javascript closures are important !

It is due to them, that we can do things like,

function createCounter(){
let i=0;
function increment(){
i++;
}

function getCounterValue(){
return i;

}
return {increment,getCounterValue}
}

The function createCounter has a local variable i, which stores the counter value, which is initialised to 0. The function returns an object which contains two functions local to this function, one to increment the counter and one to get the current counter value.

The function can be used like,

const a= createCounter();
a.getCounterValue() //0
a.increment()
a.increment()
a.getCounterValue() //2

Closures are inner functions that have access to the…


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 thing…


How I kept scratching my head over one simple feature.

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…


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

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