DEV Community: Daksh Kulshrestha

Mysterious ways of JSX

Daksh Kulshrestha — Sat, 17 Oct 2020 18:27:32 +0000

I always wonder whenever I use React, why do I import React from react library whereas I never use it in my code?
A simple Hello World could be written the following way

function myComponent(){
return <p>Hello World</p>
}

I don't see React variable anywhere and code runs perfectly fine without any error. And when I don't import it, it throws a load of errors on my terminal window. So what's up with it?

After learning JSX and it's ways, I found that since it isn't native Javascipt code, it has to be first complied into Javascript by come compiler such as Babel.

The same code above then changes to

function myComponent(){
React.createElement("p", null, "Hello World")
}

And if we don't import it, React isn't in scope, the code can't run and importing it is a necessity.

But that's a lot of hassle if you are making many different components right?

Well React heard us and from React 17, there is no need to import React from the library since there is going to be a new helper which is going to be automatically injected at the time of compiling just like this

import {jsx as _jsx} from 'react/jsx-runtime';

function myComponent(){
 return _jsx("p", null, "Hello World")
}

Now you know why do we import React. That's it for the post. Thanks for sticking till the end.

Suspense in react

Daksh Kulshrestha — Sun, 11 Oct 2020 14:43:31 +0000

So, What is Suspense in React?

A very simple way to put it is that it is used as a event listener for data fetching.

Umm... what? what did you just say?

Let me explain,

When we would use a third party API to make calls, it takes a bit time to get the response, to tell the user that it's loading, what one would do is make a state and set it to a boolean and change it when data is fetched and use that state to display a spinner/loader.
This seems pretty easy to do, but what happens when you're in a very big application?
Making a state, updating it's value, showing spinner would be tedious. That's where Suspense comes into play.

Suspense API knows when your data arrives, you just have to setup some boilerplate code once and you're set!

Suspense knows when your data is still loading and it shows a fallback component till the time being, like a spinner or preloader for example.

BEWARE! This is available in an experimental version of React, do not implement this is your production level apps.

For those who'd like to play around with this, here is a link to a codesandbox instance, fork it and experiment!

What is a service worker and why should you use it?

Daksh Kulshrestha — Sun, 16 Aug 2020 13:26:55 +0000

What are service workers?

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. They can do loads of tasks. The specific one we are gonna talk about is offline caching.

I am just a beginner to Service Workers, read them about in depth here.

How do they work?

A service worker usually mimics a caching server (from what I've understood so far). It downloads the assets used to run a webpage and then it automatically sets up a server with the static assets when you're offline. The offline version is automatically downloaded the first time you visit the app.

How do I know if they're enabled on a website?

In most cases, the service workers render a different component than the actual sites. For instance, Twitter mobile version has a service worker set up which shows you're offline, that's pretty cool right?!

How do I set it up in my website?

They are to be found in serviceworker object inside navigator function in VanillaJS. Here, I'll teach you how to set them up in ReactJS. Before setting them up make sure your app runs over an HTTPS connection. Service workers can be used to hijack connections and filter responses. Powerful stuff. While you would use these powers for good, a man-in-the-middle might not. To avoid this, you can only register for service workers on pages served over HTTPS, so we know the service worker the browser receives hasn't been tampered with during its journey through the network.

For setting them up in your React App built using CRA template, you need to open your src folder and make sure you don't touch the serviceWorker.js. When your service worker's integrity is made sure of, open up index.js and change the following line.

serviceworker.unregister()

servieworker.register()

Yes, it's THAT easy. I was shocked too. But if you're in the development server mode, offline caching won't work, since you're running the app locally.

After when your app is in production, you can just visit the app once and forget to turn on your network connection next time you visit it. If your app has some sort of CRUD functionality with any database, you can also set it up to take the instructions and do them once you're online.

This is one of the best practices of PWA. After a lighthouse report I got a PWA badge.

If you stuck till here, thanks! This is my first blog post ever! It feels really great to write. Might do this more often.