Saad

Front-End Developer | Computer Scientist

Menu Close

๐Ÿš€ 100 Days of React – What I did in the first three days

So, four days ago, I undertook 100 days of React initiative. I started a course on React which I downloaded half a year ago. For those of you who donโ€™t know what React is, itโ€™s a JavaScript library for front-end development. You can read more about it on its official website.

๐Ÿ”ฅ Day 1 – Crash course

On my first day, I took a crash course before jumping into React. The course I took was JavaScript for React Developers. This course gave me a pretty neat idea about some of the important JavaScript topics I needed to master before moving on to React.

It was an hour-long course which I completed slowly in 2 and a half-hour.ย  During this time, I refreshed my memory on all of the following topics.

  • Let/Const
  • JavaScript Objects
  • this keyword
  • Fat Arrow
  • Destructuring
  • Spread Operator
  • Classes
  • Modules

๐Ÿ˜ถ To be honest, I never fully understand how JavaScript behaves when this and fat arrow are used simultaneously. The reason might be that I lack practice. Which is true if I think about it.

I have always loved modularity in a language. And JavaScript modules are super awesome. They provide an easy and simple way to divide the code into files. These files then help big time when we have to upgrade a particular feature of our site.

Using spread operator instead of concatenating arrays is genius if you think about it. It not only allows you to combine two arrays but also lets you add anything before, after or in between the arrays.ย  Super helpful!! ๐Ÿ‘Œ๐Ÿ‘Œ

Well if you have studied Object-Oriented programming, then you already have a good idea of how classes work. JavaScript classes are no different. You can create a class which will, in turn, create an object.

โšก Day 2 – Started React

So my day 2 started with a little bump. I was running late on another project. So, I would not be able to start my 2nd day of React till night. ๐ŸŒƒ

When the night had fallen, and I had found the time, Iย  continued my work to become a React Developer. Skipping the dramatics, for now, I started a course on React byย ย Mosh Hamedaniย – Mastering React. Mosh is an excellent instructor, and I have taken many of his courses. His way of teaching always gets to me. He also created the crash course I took on day 1.

Mosh started the course with a quick explanation of React. How it works. And how it is currently the most popular JavaScript library for building user-interfaces. ๐Ÿคž

stats - msaaddev

After the introduction, I set up the development environment for React. Then I got myself familiar with React Components.ย  React components are the building blocks of React application. Once created, they can be used as many times as we want to provide specific functionality.

In terms of implementation, a component is implemented as a JavaScript class with a state and render method. The state contains the data that we want to display when the component is rendered. Whereas render method is responsible for describing what the UI will look like. So easy! Right!?

class Saad extends Component {

  state = {  }

  render() { 

    return (  );

  }

}

 

After playing around with components, I moved on to embedding expressions, setting up attributes, and rendering classes dynamically. I also touched on how to do styling in React through the JavaScript objects.

I know how uncanny it sounds but with this my 2nd day of React, which was actually night was over.

๐Ÿ‘จโ€๐Ÿ’ป Day 3 – project

I don’t have a good memory. I easily forget things. So it will be all in vain if I don’t practice what I am learning. Because I will eventually forget.

So on my 3rd day, I decided to do a small personal project to experiment with the things I learned. I once created the homepage of my old website using pure HTML and CSS. This time, I decided to build it using React.

It took me some time but I did it.ย  As I only know how to add CSS via an object, my code was a little bit messy. The following code I had written for the header section.

class Header extends Component {

  state = {

    imageURL:

      "http://raw.githubusercontent.com/msaaddev/Unresponsive-Design-HTML-CSS/master/resources/picture.png"

  };

  head = {

    background: "#4020DF",

    height: "80px",

    margin: "0px"

  };

  image = {

    width: '4%',

    borderRadius: '50%',

    margin: '10px 10px 10px 25px',

    float: 'left',

  }

  logoText = {

    fontSize: '1.6em',

    display: 'inline-block',

    color: 'aliceblue',

    margin: '22px 10px 10px 15px',

  }

  line = {

    fontWeight: '400',

    fontSize: '17px',

  }

  logoText2 = {

    fontSize: '1.4em',

    display: 'inline',

    color: 'aliceblue',

    fontFamily: 'Segoe UI, Tahoma, Geneva, Verdana, sans-serif',

    margin: '26px 10px 10px 15px',

    float: 'right',

  }




  render() {

    return (

      <header style={this.head}>

        <a href="http://msaad.me" title="my site">

          <img style = {this.image} src={this.state.imageURL} alt="saad" />

        </a>

        <p style = { this.logoText}>

          <b>Saad</b> | &nbsp;

          <span style = {this.line}>Web Developer, Computer Scientist</span>

        </p>

        <a

          href="http://msaad.me/contact-me/"

          style = {this.logoText2}

          title="contact"

        >

          Contact Me

        </a>

        <a href="http://msaad.me/about/" style = {this.logoText2} title="about">

          About

        </a>

      </header>

    );

  }

}

 

I know it is not the right way and my code is not very efficient, but hey! I am still learning. You can find this small project of mine on my GitHub account.

This small project brought an end to my 3rd day of React. I am looking forward to the next amazing 97 days.

Cheerios โœŒ

© 2020 Saad. All rights reserved.