Forem: Martha Onuh

My Goals for HNG (8) Internship

Martha Onuh — Mon, 16 Aug 2021 16:23:12 +0000

My name is Martha Onuh, a young graduate of computer Science from the Benue State University, Makurdi and I am a frontend developer.
Fortunately, as I love to put it, I got accepted into the HNG (8) internship from the Zuri Team for the Frontend development track. I must say that I am very excited to be part of these internship and I have some goals and expectations for the internship which I intend to share in these article.

For this internship, my major goal is to improve on my existing skills. I consider this a great opportunity for me to improve on my skills as this is my greatest expectation in this program. I already have existing knowledge in HTML, CSS, JavaScript, React, Bootstrap, Git and Github. I see this program as a great place for me to improve on this skills. I also hope to achieve the following at the end of this program which will last for a period of six weeks.

It is my goal to be among the finalist for this internship. I have heard so much about how people drop out along the way but I am determined to get to the last stage of these program and be among the finalist.
Also, I would like to meet new people and expand my network, I really hope I can get to achieve this because I am not so much of the social type and as such I have very little friends and network, so I hope that with the help of this program I can get to meet new people and expand my network.

I have also included a link to some of my favorite beginner tutorials;

Thanks for reading😊.

Understanding React Hooks

Martha Onuh — Sun, 09 May 2021 13:46:56 +0000

Before the introduction of Hooks, we could only create and manage State using a class-based component, we couldn't do such with a functional component as it was a stateless component, but with the introduction of Hooks in React 16.8, we can now use state and other React features without a class.

We define a Hook according to the official React documentation as "a special function that lets you 'hook into' React features". So you do not need to rewrite a functional component to a class component before you can add State but you can use a Hook inside the functional component to add State.

Let us look at the first React Hook which is the useState (Hook State).
To use it you would need to import it

import React, {useState} from 'react'

After importing it, we can now use Hook in this way;

import React, {useState} from 'react'

const App=()=> {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h4>You clicked {count} times</h4>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default App;

You can see from the code above that the value of useState is the initial value of state when we load our application (0), we then increment state.count when a user clicks a button by calling the this.setState().

Let us create the equivalent of the above application using a class component.

import React from 'react'

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

    render() {
      return (
        <div>
          <p>You clicked {this.state.count} times</p>
          <button onClick={() => this.setState({ count: this.state.count + 1 })}>
            Click me
          </button>
        </div>
      );
    }
  }
  export default App;

We can see that from both cases we had to read state and then update state.
Things to note when using Hook

You can only call hook at the top level and not inside of a condition, a loop, or a nested function.
Hooks can only e called inside of a React component and not inside a regular JavaScript function.
You can also declare more than one state variable (multiple variables).

Another React Hook we will be looking at is the useEffect (Hooks Effect) it allows us to perform a side effect (actions) on functional components. The useEffect does not use life cycle methods (componentDidMount(), componentDidUpdate() and componentWillUnmount() ) that are used in a class component.
The most common feature of useEffect is in fetching and consuming data from an API and also updating the DOM (Document Object Model).

We will take a look at how we can use useEffect to fetch data from an API.

We are going to be building a News application that displays the latest news within our region. We are getting our data from newsapi.org So below is our /App.js component. We created a state for news, with an empty useState, after fetching data from the API, we set our state to the data we got.

import React, { useEffect, useState } from 'react'
import News from './News'
import './App.css'

const App=()=>{

  const [news, setNews] = useState([])

    useEffect( () =>{
        getNews()
    }, [query]);

    const getNews = async ()=>{
        const response = await fetch(`https://newsapi.org/v2/top-headlines?country=ng&apiKey=YOUR-API-KEY`)
        const data = await response.json()
        setNews(data.articles) 
    }
    return(
        <div className="App">
  {news.map(news =>(
              <News
              key={news.title}
              title={news.title}
              author={news.source.name}
              date={news.publishedAt}
              description={news.description}
              link={news.url}
              photo={news.urlToImage}

               />
            ))}
        </div>
    )
}
export default App;

Below is our /News.js component.

import React from 'react'

const News =({title, author, date, description, link, photo})=>{
    return(
        <div className="row news">
            <div className="col-md-6">
            <h3>{title}</h3>
            <h6>Source: {author}</h6>
            <h6>Publication Date: {date}</h6>
            <p>{description} <a href={link}>Read Content</a></p>
            </div>
            <div className="col-md-6">
            <img className="img-fluid justify-content-center" src={photo} alt="..."  width="600px"/>

            </div>

        </div>
    )
}
export default News;

We can see from the above that in using the useEffect to fetch data from an API, we do not use the lifecycle method as used when doing so in a class-based component.

Conclusion

React hook is a great addition to the library and an interesting aspect of React Js as understanding it will help you to include state in functional component, there are other things to understand in Hooks, and will advise that you read through the official documentation for more understanding.
You can get the complete project on everything on this article here.
Thanks for reading!😊

React Props and State

Martha Onuh — Wed, 05 May 2021 12:36:14 +0000

If you are just getting started with React JS, I understand that it can be really confusing getting to understand these concepts and how you can use them, so I decided to write this article to explain these concepts as simply as possible.

So to begin with, what do Props mean in React?

Props is the short form of properties and they are used to pass data from one component to another. The flow of this data is always in one direction (uni-directional) from parent to child component. It should also be noted that the data that is passed is always read-only and should not be changed.
Think of props as an object that contains the attribute and their values which have been passed from the parent component. Props make it possible to reuse components.

Let's take a look at an example;
We have a simple component /SayHello.js that output a simple message

import React from 'react'

const SayHello =()=>{
    return(
        <div>
            <h1>Hello and welcome onboard</h1>
        </div>
    )
}
export default SayHello;

Now we render this component in our /App.js component

import React from 'react'
import SayHello from './SayHello'

const App=()=>{
  return(
    <div>
      <SayHello />
    </div>
  )
}
export default App;

So this is a sample of a simple component without props, however, what if we would like to add a name property to the SayHello Message and we do not want to hardcode it into the h1 so as we can change the name we SayHello to with ease.

So this is where we introduce props into our components, so the /SayHello.js will now look like this

import React from 'react'

const SayHello =(props)=>{
    return(
        <div>
            <h1>Hello and welcome onboard {props.name}</h1>
        </div>
    )
}
export default SayHello;

While the name properties (props) will also be added to our /App.js component in this way

import React from 'react'
import SayHello from './SayHello'

const App=(props)=>{
  return(
    <div>
      <SayHello name="Martha" />
    </div>
  )
}
export default App;

So you can see how simple it is to introduce props into our components, we simply need to add the property (in this case name) to the component and add the Props.(whatever property) we are passing to where we want to call it.

Let's also look at how we can use props in a class component (note that our first example is a functional component).

So in a class component, our /SayHello.js will look like this

import React from 'react'

class SayHello extends React.Component{
    render(props){
        return(
            <div>
               <h1>Hello and welcome onboard {this.props.name}</h1>
            </div>
        )
    }
}
export default SayHello;

So we have seen how props work in both function and class components.

Now let's take a look at States
Just like props, State holds information about a component, it allows components to create and manage their own data, so while components pass data with Props, they create and manage data with States. This means that a component state can change, and whenever it changes the component re-renders

let's take a look at an example of a Component creating and managing data with States.

import React from 'react'

class Record extends React.Component{
    constructor(props){
    super(props)
    this.state={
        count : 0
    }
    this.handeClick = this.handeClick.bind(this)
    }
    handeClick(){
        this.setState(prevState =>{
            return{
                count:prevState.count + 1
            }
        })
    }
    render(){
        return(
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.handeClick}>Change</button>
            </div>
        )
    }
}

export default Record;

From the above example, it can be seen that the Record component had a count state which is initially set to zero, but this state is changed by the action of a button click. You can see that the button has an onClick that calls the function "handleClick" which is set to change the initial state of count using the setState method.

One important thing to note is that in the early days that is before now, State could only be used in class component and not in functional component (this is why functional components were referred to as Stateless components) but with the introduction of React Hooks, State can now be used in functional components also. I will write about React Hook in my next article.

From all we have looked at in this article we can draw the following differences between Props and State in React.

Props are used to pass data while State is used to manage data.
Components use Props to receive data from outside while components create and manage their own data with State.
Props can only be passed from parent to child component and they are read-only.
State can be modified in its own component and this must be done using the setState() method.

Conclusion

Props and State are very important concepts in React JS and understanding how to use them is very crucial, Getting a solid understanding of these two would help your React journey. Feel free to leave a comment below and I would also like to hear from you about anything you need clarity on.
The complete project on everything on this article can be found here

A Simple Introduction to React JS

Martha Onuh — Tue, 20 Apr 2021 09:55:53 +0000

React is one of the most popular JavaScript library used for building user interfaces or UI components. React makes the process of building interfaces easier by dividing the UI into a collection of components. React is simple, fast and scalable, it allows developers to create large web applications that can change data, without reloading the page.
React is mostly concerned with state management and rendering that state to the DOM(Document Object Model), so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.
Before going into React a good understanding of HTML, CSS, and basic JavaScript is needed, you don't have to be a JavaScript expect, but a good knowledge of JavaScript would be very helpful (knowing things like; variables, object and array destruturing, arrow functions, callbacks, template literals and ES6 Modules).
In these article we will be looking at the basic features to get you started.

Installation

The most simple and beginner friendly way of installing ReactJs is by installing create-react-app.
Create-react-app is a comfortable environment for learning React, its sets up your development environment and provides a nice developer experience. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, and use ESLint to test and warn about mistakes in the code. You will need to have Node Js on your machine. For a guide on how to download and install node, visit the official documentation
After this you can create a project by running the following code in the terminal;

npx create-react-app my-app
cd my-app
npm start

Once you run this command, a new windows will pop up at localhost:3000 with the React' welcome page

React Components

So let's move on to creating a component in React, remember at the introduction we mentioned that with React we build interfaces by dividing the UI into a collection of components.
The create-react-app comes with a lot of files that perform various functions. If you look into the project structure, you will find a /public and /src directories along with some other files. The /src directory is where we will be writing all our React code.
The /src/App.js is the most important of all the files you have there, every other component you would be creating would be rendered in the App.js component.
So let us start by analyzing our first component /src/App.js which I have simplified.

import React from 'react'

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

export default App

You can see from the above that we imported a JavaScript library( the react npm paackage) and we have a class that returns a heading of "Hello, React" then we exported the function App. When we open our browser now, we would only be seeing our 'Hello, React'.
We can have more than one component and render them in our App.js component.
Take for example
We have a Header component in /src/Header.js

import React from 'react'

class Header extends React.Component {
  render() {
    return (
      <div className="header">
          <h1>This is a header</h1>
      </div>
    )
  }
}

export default Header

And we have another component Content in /src/Content.js

import React from 'react'

class Content extends React.Component {
  render() {
    return (
      <div className="content">
          <p>This is the content of the page</p>
      </div>
    )
  }
}

export default Content

We can now render both component in our App component /src/App.js

import React from 'react'
import Header from './Header'
import Content from './Content'

class App extends React.Component {
  render() {
    return (
      <div className="app">
          <Header />
          <Content />
      </div>
    )
  }
}

export default App

You can see that we have imported both our Header component and Content component and rendered them in our App component.

JSX

JSX (or JavaScript XML) is a special language we use to build component's output, it looks like HTML but it has some JavaScript embedded into it.
Take a look at the App function in the original example (the one we had after running create-react-app), it returns something that at first sight looks quite strange

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

From the above, we see that everything inside of the return statement is JSX. JSX is actually closer to JavaScript, not HTML, so there are a few key differences to note when writing it.

We use className instead of class for adding a CSS class because class is a keyword in JavaScript
Self closing tags must end with a slash e.g <img />
Methods and properties in JSX are written in camelCase e.g onsubmit will become onSubmit
JavaScript expressions can also be embedded inside JSX using curly braces, including variables, functions, and properties for example,

const name = 'Martha'
const greeting= <h1>Hello, {name}</h1>

Conclusion

This article covers the very basic introduction to React, there is still so much more you will need to learn, I hope you push further and get a mastery of React. Feel free to drop a comment on any topic you would like me to write about and stay tuned for more articles on React from me😊