My Web Development Journey

15 March 2020, VIT Vellore announces a 3 months holiday due to covid-19 till 31st June(which ended up extending forever as you know). And Me being a student of Masters of Computer Application (MCA) in my second semester, after 1 month my 3rd sem i.e., last year i.e., my PLACEMENTS were supposed to start !

Being worried about my future, I packed my bags and flew all the way from Tamil Nadu to my hometown Kanpur.

The reason I was worried was because I was pretty bad in competitive coding and didn’t had a single project on my resume to increase my chances of placements. And as expected the quantity of companies decreased drastically during campus placements.

Now, this was the time when I was having a lot of time in my hands, because online classes were useless as expected, so I was exploring different skills to acquire during this lock down period to utilise most of it, and then I came across this influencer on Instagram - Tanay Pratap. He was preaching / guiding students like me through his content to pick up what’s best right now in tech industry, and that’s when I took his suggestion and picked up Web Development.

I had some basic understanding of HTML, CSS and JS from college subjects, so I thought I shouldn’t have any problem with React JS. So I quickly enrolled myself into an udemy course. But man, was I wrong.. I just coded along what the instructor was coding without even understanding what was going on. And that’s how I wasted my one month trying different videos of react thinking probably there was something wrong with the tutorial I was going through.

But then someone suggested me to learn ES6 JavaScript first as it’s a lot different from what is taught in college.. And that was true! Therefore I set on to find a good JavaScript course and came across Jonas Schmedtmann’s udemy Course. It was an amazing +fun experience.. His explanations were crystal clear and the way of teaching was really good.

Now that I was beginning to understand what went wrong while learning react, I was beginning to recall all the things that I had came across while learning react -

• The arrow function,

const add = (a) => {
  return a + 100;
}

• Map,

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

• Filter, etc

const names = ['James', 'John', 'Paul', 'Ringo', 'George'];
{names.filter(name => name.includes('J')).map(filteredName => (     <li>{filteredName}</li>
))}

In that course, Jonas goes on to first teach the basics of JavaScript then moves on to explain ES6 concepts and asynchronous JavaScript — async/await, fetch, promises, rejection, etc and packages like axios which make our development easier. All this with the project based approach to learning.

After having the command over JavaScript, I moved back towards learning React and tried numerous different sources to learn and create different projects and I absolutely loved the process that it is so easy and flexible to create a website through coding in 2020.

My first project was this COVID-19 Tracker —

https://piyush-eon.github.io/covid19_tracer/

I learned how to work with Rest APIs and actually got to use axios package to fetch the data and display on this web app. Apart from that I used React chart and Material UI libraries.

Here’s the API and its code -

import axios from "axios";

const url = "https://covid19.mathdro.id/api";

export const fetchData = async (country) => {
let changeableUrl = url;
if (country) {
changeableUrl = `${url}/countries/${country}`;
}
try {
const {
data: { confirmed, recovered, deaths, lastUpdate },
} = await axios.get(changeableUrl);
return { confirmed, recovered, deaths, lastUpdate };
} catch (error) {
console.log(error);
}
};
export const fetchDailyData = async () => {
try {
const { data } = await axios.get(`${url}/daily`);
const modifiedData = data.map((dailyData) => ({
confirmed: dailyData.confirmed.total,
deaths: dailyData.deaths.total,
date: dailyData.reportDate,
}));
return modifiedData;
} catch (error) {
console.log(error);
}
};

export const fetchCountries = async () => {
try {
const {
data: { countries },
} = await axios.get(`${url}/countries`);
return countries.map((country) => country.name);
} catch (error) {
console.log(error);
}
};

This code fetches the daily as well as country wise Covid-19 data from the API. But this was the project based on old react practices, i.e., ComponentDidMount etc.

This was when I came across Functional approach of building react apps and the React Hooks and how it makes our life easier by reducing a large amount of code.

I then went on to learn the 2 most important hooks in react -

UseState

Handles the state of a component

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

UseEffect

Similar to componentDidMount and componentDidUpdate

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

useEffect(() => {    
// Update the document title using the browser API
document.title = `You clicked ${count} times`;  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );

Having learned React , I started applying on internships at Internshala, and after a while I got a 4 month internship, where I got to learn many things by working and building a real eCommerce website.

Further I learned Server Side Rendering in React and the framework based on React called Next JS which basically helps in SEO for react websites by pre rendering everything on the server.

Fast Forward… Currently I’m in my process of learning MERN Stack i.e., Mongo DB , Express, React and Node JS which I will cover in another blog post.

You may check more of my work here-

https://piyushjsx.netlify.app/

Thanks for reading..

Peace.