So it’s 9:33 PM here in Lahore right now, and I have started writing another blog on my React initiative. I am planning to keep this blog short. Because I know I don’t have much stuff to write about currently. You see, I mentioned something in one of my earlier blogs that I broke my glasses. And because of it, I couldn’t do anything.  I thought the story was over there, but it wasn’t.

Today’s blog is not only about what I did in React, but also on what happened on my 16th and 17th day.

😅 Day 16 – Nothing

Let’s start with what I did yesterday, which is practically nothing. It was a typical day with a small distinction. I had an appointment with my optician because my eyes were in pain for quite some days. Before moving on, let me tell you this first that I am wearing spectacles for more than a decade and I will be twenty this year.

So, I went to see the doc in the morning. She examined my eyes and used the big machine to get my eyesight. Apparently, my eyesight has increased more than I expected. Well, I can’t blame anyone but myself as I have a total watch time of almost four months. 😂

You see, I have an eye condition — Astigmatism. My corneas are curved, and I can only properly focus at a certain angle. That angle was 170° last year, and now it is 180°. Kudos to all my all-nighters. 👏

Back to the story, the doc then did a full inspection of my eyes. She literally looked inside my eyes to see if anything’s broken. The funny thing was, I lost my sight for like 7 hours because of the drops she put before doing that. 😂

When I recovered my sight, it was almost 6, and I had a Developer Student Club meeting scheduled at 6:30. The meeting went for like two and a half hour. And when I got free around 9, I gave my spectacles to a local shop for replacing its glasses to my new number.

Fast-forwarding to today, it’s 10:08 PM now and I have yet to go to the shop to get my spectacles back. I’ll go and get them after publishing this blog. ✌

👨‍💻 day 17

As I just said, I gave my spectacles yesterday to a local shop for some replacements. It’s hard for me to look without them, but I can’t afford to waste another day. Eid is just around the corner. And I have yet to decide if I will work on Eid or not. So, I did some work today.

🌐 Route and link components

Quoting one of my favorite line of myself, “I will not go into many details here.” The reason is quite simple, actually. It is hard for me to focus, and because of it, my eyes are hurting. And also because it is tough to explain some of the stuff which I am learning now.

So let’s start. When we have to render a particular content based on a given URL, we use Route component. For that, import the Route component at the top of your JSX file.

import { Route } from "react-router-dom";

📦 This statement will import the Route component in your file. You can then use it like this:

As you can see, the path and component are passed as props to the Route component. This Route component looks at the current URL to see if it matches the pattern that is passing through path props, if it does, it renders the component in component props. 💯

Now, it’s time for the Link component. To give you some idea, let me tell you this first that all of the components we create is a part of a bundle.js file. This JS file is downloaded ahead of time when the app loads. If we use a simple anchor tag, it will redownload every file when the user navigates to a different page. So to prevent that, we use the Link component.

import { Link } from "react-router-dom";

🚀 The statement above will import the Link component in your file. You can then use it as follow:

You also need to replace the href attribute with to.

Well, folks, that’s it for today. I should go and get my glasses back before the shop closes. I’ll write again tomorrow. Till then, cheerios. 🤞