Forem: mcwachira

Day 5 of the #100daysofCode Challenge. Learning React React Lifecycle Methods

mcwachira — Mon, 01 Mar 2021 09:11:44 +0000

Its Day 5 of the #100daysofCode challenge and we are going to talk about react lifecycle methods.

React Lifecycle Methods

So the first question that comes to mind is what are React lifecycle methods?
You can think of lifecycle methods as series of events that happen sequentially from the conception and birth of a react component to its death.
There are three main stages in a react component lifecycle where the component ia monitored and manipulated.
The three main stages include
1.Mounting - conception and birth of a react component
2.updating - growth of a react component
3.unmounting - death of a react component

Mounting

This is the stage where elements are placed in the dom.
There are four built in methods in this stage

Constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

out off the four the most commonly methods are

1.constructor()

The constructor() method is called before the component is initialized and its where the initial state is placed
The method is called with props as arguments

class Counter extends React.Component {
  constructor(props) {
    super(props);
      count: 0,
    };
  }

In the above example we have created a simple counter component and placing its initial state in the constructor method and setting its initial value to zero.

2.render()

This is the only required method in a component and its role is to handle the rendering of your component to the UI.

class Person extends React.Component{
render(){
 return    <div> my name is charles and am 27 years old</div>      
      }
}

The above example shows the render() method returning jsx which is displayed on the ui.

3.componentDidMount()

This method comes into play after your component has been mounted.Its called once in the lifecyle process and it signifies that you component has been rendered properly.
Its at this point where data from a remote api can be brought in.
Here we can use the setSate() method to update the state.This will cause a re-render to occur but it will happen before the browser updates the ui.

componentDidMount() {
   const json = localStorage.getItem("count");
   const count = JSON.parse(json);
   this.setState(() => ({ count: count }));
    }
  }

In the above simple example data is fetched from local storage and it used to update the state via the setState method.

Updating

Its the next stage in the lifecycle process and its during this stage that the component is updated.
It consist of five built in methods which are called in order when the component is updated

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

In the update stage the the most common method is

componentDidUpdate()

Its called after the component has been updated in the dom and any rendered html has finished loading.
It takes in two arguments props and state which updates the dom as soon as changes occur in either.
The setState() can be called in this method but it must be wrapped in a conditional statement in order to check for changes in state or props.
Wrapping it in conditional statement will prevent it from from forming an infinite loop.

 componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      const json = JSON.stringify(this.state.count);
      localStorage.setItem("count", json);
    }

In the above code example we taking in our previous prop and state and checking if the previous state count is similar to the current state count and if its not we then store the current state count in local storage.

Unmounting

This is the next phase of the lifecycle where the component is removed from the dom.
It consist of only one method

componentWillUnmount()

componentWillUnmount()

Its called write before the component is removed from the dom.
In this method you can perform the necessary clean ups like invalidating timers, canceling network requests, removing event listeners or canceling any subscriptions made in componentDidMount().

componentWillUnmount() {
  clearInterval(this.interval);
}

REACT COMPONENT LIFECYCLE DIAGRAM

The diagram below gives an overview of the different react lifecycle methods. Its from the official react documentation

This has been my firth day learning react and is has been awesome and interesting.
cheers guys and happy learning.
Connect with me on twitter and lets talk about react

Day 4 of the #100daysofCode Challenge. Learning React

mcwachira — Sun, 28 Feb 2021 12:18:53 +0000

STATEFUL OR STATELESS COMPONENTS WHICH ONE TO CHOSE AND WHY?

During my fourth day in my #100dayofCode journey I have been learning about stateful and stateless components and I decided to write an article about it.

The first question that comes to mind is what is state?
State is simply an object that hold information about a react Component. State is used in tracking changes that occur in a react Component and re-rendering it.

import React from "react";
import ReactDOM from "react-dom";

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(<Clock />, document.getElementById("root"));

The above example is a simple component that has state and we use the state to render output on the web page.

stateful and stateless components

What is a stateful component ?
Its is simply a class component as it has a state object initialized in the constructor and can change it own state.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

ReactDOM.render(<Counter />, document.getElementById("app"));

The above example is a stateful component as the component contains a state object initialized in the constructor.

stateless components

stateless components are simply functional components which have no state object.
stateless components just take information via props and and outputs it on the web page.

import React from "react";
import ReactDOM from "react-dom";
const Header = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
    </div>
  );
};

ReactDOM.render(<Header title="my App" />, document.getElementById("app"));

This simple example shows a stateless component which receives information via the props and displays it.

So I know you are asking when to use one over the other

when to use stateless components

1.When there is no interactivity needed

when there is need to reuse your code
when no state is required

when to use stateful components

1.when you want to pass data to the component for rendering
2.when you need interactivity in your web app

when taking in user data via input forms

Advantages of stateless components

1 Easy to understand - Stateless components are usually JavaScript functions which are easy to understand.
2.High performance - stateless components have high performance compared to stateful components as they don't have state and life cycle.
3.Stateless components reduce the code base size making the code to become clean and optimized.

This has been my fourth day learning react and is has been awesome and interesting.
cheers guys and happy learning.
Connect with me on twitter and lets talk about react

Day 2 and 3 of the #100daysofCode Challenge. Learning React

mcwachira — Sun, 21 Feb 2021 09:35:26 +0000

I have spend the yesterday and today learning react in my #100daysofCode challenge.
My main focus has been to learn about props, state and setState. I found it a bit difficult at first to understand the concept of state and setState but as all good students do I never gave up and continued learning and I now have a bit of technical know how on the subject matter.
In order to explain props lets start by writing two components a parent and a child component.

class School extends React.Component{
render(){

return(
<div>
<h1> This is a parent Component</h1>
        <h2>    <Student/> </h2>
</div>)
   };
}

lets now write our child component

const student =() =>{
return <p> my name is charles </>;
};

We may want to render the student multiple times in the School component and with different names and this is where props come in handy.

So What are props? props are arguments that are passed to react components.You may think of props as parameters that are passed to functions in JavaScript.

Arguments passed in a JavaScript function

function Add(one , two){
return one+ two;
}

Props passed as argument in react

const Student =(props) =>{
return <p> my name is charles </>;
};

So to render the students component with different names and multiple times in the school component we just use props to pass data from the parent component (School) to the child component (Student);

class School extends React.Component{
render(){

return(
<div>
<h1> This is a parent Component</h1>
        <h2>    <Student name={'charles'}/> </h2>
        <h2>    <Student name={"pamela"}/> </h2>
        <h2>    <Student name={"Sheila"}/> </h2>

</div>)
   };
}

const Student =(props) =>{
return <p> my name is {props.name} </p>;
};

This is what is rendered on the web page

So we see that each child component renders its own prop data .So props are basically used to pass data from the parent component to the child component and in a unidirectional way meaning that data flow is one way from parent component to child component only.

Now lets talk about state.
### What is state?

State is simply an object that hold information about a react Component.
State is used in tracking changes that occur in a react Component and re-rendering it.
So let write a simple counter app to demonstrate the use of state in react

import React from "react";
import ReactDOM from "react-dom";

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }
  handleAddOne() {
    this.setState((prevState) => {
      //method to update the state
      return {
        count: prevState.count + 1,
      };
    });
  }
  handleMinusOne() {
    this.setState((prevState) => {
      //method to update the state
      return {
        count: prevState.count - 1,
      };
    });
  }
  render() {
    return (
      <div>
        <h1>Count:{this.state.count}</h1>
        <button onClick={() =>this.handleAddOne()}>+1</button>
        <button onClick={ () =>this.handleMinusOne()}>-1</button>
      </div>
    );
  }
}


ReactDOM.render(<Counter/>, root);

This is a simple app which has two buttons .One button to increase the value of a number when pressed and the other to decrease the value of the number.

Lets break down the code
We start by writing our state in the constructor and initializing it with data

 constructor() {
    super();
    this.state = {
      count: 0,
    };

In this example we hard coded our data but you can use props to pass data to the state.

UPDATE THE STATE

we then change our state and update it and this is where setState() method comes in

 handleAddOne() {
    this.setState((prevState) => {
      //method to update the state
      return {
        count: prevState.count + 1,
      };
    });
  }
  handleMinusOne() {
    this.setState((prevState) => {
      //method to update the state
      return {
        count: prevState.count - 1,
      };
    });
  }

If we look at both the handleAddOne() and HandleMinusOne() methods the SetState()method is used to update the value of the initial state.
The setState method takes in a callback function through which we can access the prevState which holds the the previous state of the component where can modify and update the state.

There are some guidelines when it comes to using setState()

Don't modify the state directly

 this.setState(() => {
      //method to update the state
      return {
        count: this.state.count + 1
      };
    });

The above codes work but its not the best way to modify the state as we as we are doing it directly.
This is because setSate is an a asynchronous operation and the changes to the state may happen at a later time hence the setState may overwrite our manually mutated state.

This two day have been a bit hectic as I was trying to understand state and props but I have managed to pull through and get the concepts.
You can do it to us don't give up and happy learning.

100daysofCode.

Resources

React Docs
Github
stackOverflow

Day 1 of the #100daysofCode Challenge. Learning React

mcwachira — Fri, 19 Feb 2021 17:18:15 +0000

Today is my first day of the #100daysofCode challenge and though this journey I have committed myself to learn react and become a front-end developer and also share what I have learn.
So the first question I had to ask myself is what is react? According to the react website react is a JavaScript library for building beautiful interfaces.

I also had to ask myself why use react to build web apps instead of using plain old JavaScript and the main reason I found is that react divides your web app into smaller reusable parts called components.
So before I go on talking about components let write a simple react program to display our name on a web page.
lets start with our html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Name App</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js">
 https://unpkg.com/@babel/standalone/babel.min.js. </script>
    <script src="scripts/app.js" type="text/babel"></script>
  </body>
</html>

We start by writing the html element div and giving it an id of app as this is where our name will appear on the screen.
We then add links for react and react dom packages as we are using react to develop our app and need both react and react dom otherwise this would be just a plain JavaScript app.
The react package is used for writing react components while the react dom package is used to provide dom specific methods like render() that helps in displaying our app on the web page.
The Babel package included enables our browser to understand jsx (JavaScript xml).
Jsx just enable us to write html in react.

JavaScript file

ReactDOM.render(<h1>charles wachira</h1>, document.getElementById('root'));

In our JavaScript file we use the render() method provided by the react dom package to display our app on the web page.

Now lets get back to react components. What is a react component?
A react component is a basically reusable pieces of code which building blocks of your react app. They take input data and return something to be displayed on the web page using a the render method .
a simple component would look like this

const myName =()=><p> charles wachira</p>;

This is a component that takes no input but on displays my name.
There are basically two types of components
1.Class components
2.Functional components.

CLASS COMPONENTS

A class component is a component that is created or defined using ES6 class syntax.

class Hi extends React.Component {
    render() {
        return(<h1>my name is charles wachira </h1>)
    }
}

This a simple class component which return a h1 element with my name on the web page using the render method.

FUNCTION COMPONENTS

A function component is basically a JavaScript function that return a react element.

function myName(){
return<h1>my name is charles wachira </h1>;
}

This function component returns a h1 with my name.

This has been my first day learning react and it has been a awesome one having learnt some react basics. I hope to to continue learning and become a good front-end developer .
cheers guys and happy learning .