My Journey & Growth In The Tech World

Photo by Caspar Camille Rubin on Unsplash

My name is Juliet, I am a student & currently an intern at LearnFactory Nigeria.

I found out about Learn Factory from my mentor, I was at a loss about what to do during my 6-months internship & he advised that I go into software development. I got an opportunity at LearnFactory, a big tech company at Aba, Abia State Nigeria. I came to LearnFactory on the 15th of July 2019 & so far I’ve been able to learn a lot (thanks to my instructors & fellow interns) ranging from Html, Css, Javascript & now I am in React…

In this article, the main thing I want to discuss is React.

What Is React?

React is a Javascript library created by Facebook. It is used for building user interfaces & also it is a view layer for web applications. At the heart of all react, applications are Components. Before I delve into components I would like to inform us(especially newbies) that setting up react is tedious but thanks to Facebook that has shortened the work into a line of code Create React App.

What Is A Component?

Components are the building block of a react app. Components can either be stateful or stateless.

I created my first component on the 3rd of September 2019, it was really awesome & easy. We were told by our instructor (Master Ugwuanyi Chidera) the previous week to install the React app on our systems & also gave us a list of topics (classes, the keyword this e.t.c)to go through properly so as to understand React when we start learning it. That advise was really helpful because by the time we started I was flowing properly in the class. The first component I created was a todo app, I wrote a class component that will render a HTML element <h1>Welcome To My First Todo App</h1>.

import React, {Component} from ‘react’;
class Todo extends Component {
 render(){
   return (
     <h1>Welcome To My First Todo App</h1>.
   )}
 }
export default Todo;

When you create the react app, it comes with files likes index.html, index.css & index.js.

For your component to show in the browser, it must be rendered in index.js.

Linking & rendering components appropriately are also important so that your work will show in the browser.

In the next class, I learnt about props.

What Are Props?

React props are like function arguments in javascript & attributes in Html. They use the same syntax as Html attributes. It is targeted with this keyword. You can use a prop used in a component & call it in different areas of your app using this.props. For example:

import React, {Component} from ‘react’;
class Lucky extends Component {
  render() {
    const {text} = this.props;
    
    return (
      <div>
        <Lucky text=”Hello World, My Name is Juliet”/>
        <h1>{text}</h1>
      </div>
      )}
  }
export default Lucky;

In the next class, I learnt about the states in React. State & props are almost the same, the difference is that state is immutable. State has a method called setState that helps to update the state without changing the initial state. Sounds funny right?

I felt the same way the first time I heard about it but trust me it is wonderful. You will be amazed at the things you can do with the state. In class, I was thought of how our Facebook likes work. The reason behind you clicking on like & you see it adds you to the number of people that have liked that post is state & setState. Below is what the code looks like:

import React, {Component} from ‘react’;
class Likes extends Component {
  state = {
   likes:0
  }
  increaseLikes = () => {
    this.setState((PrevState,PrevProps){
    return(
      likes: PrevState.likes + 1
     )
    })
  }
  render(){
    return{
      <h1>Like My Post</h1>
      <h3>Likes:{this.state.like}</h3>
      <button onClick = {this.increaseLikes}> like</button>
     }
   }
 }
export default Likes

Recall I talked about stateful & stateless components, well the code above is an example of a stateful component.

You can also have a function that makes it unlike or reset or stop at a particular number.

Note: Every function should be written before the render method.

On my own, I have learnt how to do some styling in React.

We still have more to learn like Lifecycle methods, Router e.t.c.

React is beautiful & makes coding simple & faster.