Github User.fw.png

Repository

What Will I Learn?

You will learn how to create componet with React
You will learn how to access github api
You will learn how to use setState()
You will learn how to use Axios
You will learn how to use MomentJs
You will learn to communicate between components
You will learn how to create a design with a Materialize CSS framework

Requirements

text editor (I used visual studio code)
Basic javascript information
Basic react information

Difficulty

Basic

Tutorial Contents

I believe that the best way to learn react will be on an application so I decided to show you how to do an application that includes basic react topics.

In this tutorial I'll show you how to access an api with the react. As api, I will use github's user information. I will access the https://api.github.com/users/github_user address by react and display the information with the application.

The application will receive github user information from the user and will contact the github api to request the information of the user and display the information to the user in the application.

We will need axios and moment packages in the application. We will use axios packages to connect with api and will use moment packages to properly set times.

Let's start creating the application.

Creating A React Project

We will use the create-react-app to create a react application thus, we will have installed all the necessary equipment to create the react application.

Let's move to the file directory with the terminal and create the project with the following command.

create-react-app github-user-app
cd github-user-app

I need to place cdn links on index.html page because i will use google's developed materialize CSS framework for the design of the application.

In public/index.html

<head>
…
<title>Github Users</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

Edit the App.js file as follows.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      
      </div>
    );
  }
}

export default App;

We are now ready to improve the app.

Creating Components

I will create 3 components in the application.

Header Component to create the title of the page.
Form Component to github user information.
Info Component to display informations.

In the src folder, let's create the components folder and add Header.js, Form.js and Info.js files.

Create Form.js and Info.js files for the time being as follows.

In Form.js

import React,{Component} from 'react';

class Form extends Component{
    render(){
        return (
            <div>
                Form Component
            </div>
        )
    }
}

export default Form

In Info.js

import React,{Component} from 'react';

class Info extends Component{
    render(){
        return (
            <div>
                Info Component
            </div>
        )
    }
}

export default Info

I will use the Header Component to set the header field of the page, and set nav tags using materialize.

In Header.js

import React,{Component} from 'react';

class Header extends Component{
    render(){
        return (
            <div>
                <nav>
                    <div className="nav-wrapper">
                    <a href="#" className="brand-logo center">Github User Information</a>
                    </div>
                </nav>
            </div>
        )
    }
}

export default Header

We need to place these components in the App Component so that we can see all the components in a page.

To use a component in another component, we must first import that component's page.

In App.js

import Header from './components/Header';
import Info from './components/Info';
import Form from './components/Form';

Then we can use these components in the order we want.

class App extends Component {
  render() {
    return (
      <div className="container">
        <Header />
        <Form />
        <Info />
      </div>
    );
  }
}

I used the materialize container class and placed the components.

Thanks to the container class, all contents are placed in the middle of the page.

So that the image appeared as follows.

Form Component Event Creation

I will put input and button in Form Component. Since I have to access the github api by using the value written into the input, I will store the value entered in the state.

I will use the materialize classes to design the input and button.

In Form.js

<div className="row">
                <form className="col s12">
                <div className="row">
                    <div className="input-field col s6">
                        <input placeholder="Please enter github username" id="github_user" type="text" />
                        <label htmlFor="github_user">Github User</label>
                    </div>
                    <div className="input-field col s6">
                        <button className="waves-effect waves-light btn">Submit</button>
                    </div>
                </div>
                </form>
            </div>

The following image will be generated as a result of the design.

We can start creating events according to our design.

Let's create a state first.

state={
        userName:''
    }

I want to capture every change in input and transfer it to userName state for this I must activate the input onChange event.

handleChange=(e)=>{
        this.setState({
            userName:e.target.value
        })
    }
…
<input onChange={this.handleChange} placeholder="Please enter github username" id="github_user" type="text" />
…

With setState(), we can update variables within the state.

Now all we do is submit the state object when the form is submit.

…
handleSubmit=(e)=>{
        e.preventDefault();
        console.log(this.state);
        
    }
…
<form className="col s12" onSubmit={this.handleSubmit}>
…

With the e.preventDefault() function, I remove the default properties of the page. Thus, when the page is submitted, it does not refresh and the state objects do not return to the initial value.

Now I can access the input value in the state.

Use Of Axios

Axios is an HTTP Client that can work with both browser and server. With the axios, we can access and send information to the remote server's api.

In this application we will use axios in github api to access some information.

Let's first examine the address of https://api.github.com/users/pckurdu.

When we access the github api with the pckurdu username, we can access a number of information about this user.

Let us display the user's name, address, creation date, etc. in the application.

For this operation, let's edit the state in Form Component.

state={
        userName:'',
        name:'',
        public_repos:'',
        login:'',
        url:'',
        created_at:''
    }

Let's add axios packages to the application using yarn.

yarn add axios

Let's import axios packages into the Form Component.

import axios from 'axios';

In the handleSubmit function, connect to the api address using axios.get() and access the information.

handleSubmit=(e)=>{
        e.preventDefault();
        //console.log(this.state);
        axios.get(`https://api.github.com/users/${this.state.userName}`)//new line    
 }

With axios, we can retrieve the rotating information in then() and do a state update in then() function.

handleSubmit=(e)=>{
        e.preventDefault();
        //console.log(this.state);
        axios.get(`https://api.github.com/users/${this.state.userName}`)
        //new code 
        .then((res)=>{
        console.log(res.data);
            this.setState({
                name:res.data.name,
                public_repos:res.data.public_repos,
                login:res.data.login,
                url:res.data.url,
                created_at:res.data.created_at
            })
        })
        
    }

We can access the information that came with res.data.

Now we have access to github user information.

Communication Between Components

We can use props to move data between components.

Send the state object in the Form Component to the App Component. Then create a state object here and send that state object to the Info Component.

Let's create the state that holds the user information in the App Component.

In App Component

state={
    user:''
  }

Let's create a function that will update the information it contains and send it to Form Component as props.

information=(user)=>{
      this.setState({
        user:user
      })
  }
…
<Form info={this.information}/>

Let's use this function in the Form Component and insert the information from the api into the function.

In Form Component

axios.get(`https://api.github.com/users/${this.state.userName}`)
        //new code 
        .then((res)=>{
            console.log(res.data);
            
            this.setState({
                name:res.data.name,
                public_repos:res.data.public_repos,
                login:res.data.login,
                url:res.data.url,
                created_at:res.data.created_at
            })

            this.props.info(this.state)//new line
        })

We can now send the information from the api to the Info Component.

In App Component

<div className="container">
        <Header />
        <Form info={this.information}/>
        <Info user={this.state.user}/>
      </div>

Editing Info Component

In the Info Component, let's edit the ul-li tag using the materialize framework.

With the user object in props we can display the information on the screen. We can edit this information by using the collection class in materialize framework.

class Info extends Component{
    render(){
        const user=this.props.user;
        return (
            <div>
                
                <ul className="collection">
                   <li className="collection-item"><b>Name:</b> {user.name}li>
                    <li className="collection-item"><b>Repo Count:</b> {user.public_repos}li>
                   <li className="collection-item"><b>Login Name:</b> {user.login}li>
                   <li className="collection-item"><b>Url:</b> {user.url}li>
                   <li className="collection-item"><b>Created Date:</b> {user.created_at}li>
                </ul>
            </div>
        )
    }
}




So the app looks like the following.






Empty lines appear when Github user information is not requested. When the information is not received, it is checked to ensure that these empty lines are not visible.
The new version of the Info Component is as follows.
class Info extends Component{
    render(){
        const user=this.props.user;
        return (
            <div>
                
                {user.userName &&<ul className="collection">
                   <li className="collection-item"><b>Name:</b> {user.name}li>
                    <li className="collection-item"><b>Repo Count:</b> {user.public_repos}li>
                   <li className="collection-item"><b>Login Name:</b> {user.login}li>
                   <li className="collection-item"><b>Url:</b> {user.url}li>
                   <li className="collection-item"><b>Created Date:</b> {user.created_at}li>
                </ul>}
            </div>
        )
    }
}











Use Of MomentJs
Momentjs is a javascript library that allows you to formatted dates from applications.
Github gave us the date in a specific format but I'll rearrange it using momentjs because I don't want to use that format.
To use momentjs, we must first add packages to our project.
yarn add moment




We can use it to import moment into Info Component.
import moment from 'moment';




The date field we want to format is in the moment() function. Then call the required function for the format we want. I will use the calendar() function in this application.
<li className="collection-item"><b>Created Date:</b> {moment(user.created_at).calendar()}li>




The application will look like the following.


Proof of Work Done
https://github.com/pckurdu/Build-github-user-application-with-react

Build A Github Users Information Application With React

Repository

React Github Address

Axios Github Address

MomentJs Github Address

My GitHub Address

This Project GitHub Address