Build A Github Users Information Application With React by pckurdu

View this thread on steempeak.com
· @pckurdu ·
$18.85
Build A Github Users Information Application With React
![Github User.fw.png](https://cdn.steemitimages.com/DQmZrUbUFgqgF7GEKVS1KXDT6VutsEjGZhfupEvniEMXPHv/Github%20User.fw.png)

# Repository

### React Github Address
https://github.com/facebook/react

### Axios Github Address
https://github.com/axios/axios

### MomentJs Github Address
https://github.com/moment/moment

### My GitHub Address
https://github.com/pckurdu

### This Project GitHub Address
https://github.com/pckurdu/Build-github-user-application-with-react

# 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 <a href="https://code.visualstudio.com/">visual studio code</a>)
- 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 
```
<br/>
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>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
```
<br/>
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;
```
<br/>
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.
![React1.JPG](https://cdn.steemitimages.com/DQmdPebBw7sP7wDxiZacGddxLLRt7mJ3q3so6pCwjG3mS6J/React1.JPG)
<br/>
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
```
<br/>
In Info.js
```
import React,{Component} from 'react';

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

export default Info
```
<br/>
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
```
<br/>
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';
```
<br/>
Then we can use these components in the order we want.
```
class App extends Component {
  render() {
    return (
      <div className="container">
        <Header />
        <Form />
        <Info />
      </div>
    );
  }
}
```
<br/>
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.
![React2.JPG](https://cdn.steemitimages.com/DQmSEBzNZ62Fvkz2TyxjzyGubc2gEjMBGhw5GPShdyNipRf/React2.JPG)
<br/>
### 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>
```
<br/>
The following image will be generated as a result of the design.
![React3.JPG](https://cdn.steemitimages.com/DQmYwWo68p2DxqFUV61JMFZJE6Zr3TwsaQB3PT62BbmGtmY/React3.JPG)
<br/>
We can start creating events according to our design.

Let's create a `state` first.
```
state={
        userName:''
    }
```
<br/>
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" />
…
```
<br/>
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}>
…
```
<br/>
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.
![React4.JPG](https://cdn.steemitimages.com/DQmSAa3R9evdQcrfivRnjc4vmsMczFMkQBPomovkQ6JEGbC/React4.JPG)
<br/>
### 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`.
![React5.JPG](https://cdn.steemitimages.com/DQmas6p3gxzjL875deqge1TZYV7xsHr2Gh3pzPgMmW3UDp8/React5.JPG)
<br/>
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:''
    }
```
<br/>
Let's add `axios packages` to the application using `yarn`.
```
yarn add axios
```
<br/>
Let's import axios packages into the Form Component.
```
import axios from 'axios';
```
<br/>
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    
 }
```
<br/>
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
            })
        })
        
    }
```
<br/>
We can access the information that came with `res.data`.
![React6.JPG](https://cdn.steemitimages.com/DQmVzFiDikYErh9jv9t9WgzWrgTZMLn1mkP1Lox7P4UiqaW/React6.JPG)
<br/>
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:''
  }
```
<br/>
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}/>
```
<br/>
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
        })
```
<br/>
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>
```
<br/>
### 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>
        )
    }
}
```
<br/>
So the app looks like the following.
![React7.JPG](https://cdn.steemitimages.com/DQmVcL96tuWEiKAH4NwEAPXatREkbBo7LqyKtZR5F7Xdxtd/React7.JPG)
<br/>
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>
        )
    }
}
```
<br/>
![React8.JPG](https://cdn.steemitimages.com/DQmfYvNtUxtNyiPMNC5Nk4X4fvGN1oaktARY4YgfCyKdmWY/React8.JPG)
<br/>
<br/>
### 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
```
<br/>
We can use it to import moment into `Info Component`.
```
import moment from 'moment';
```
<br/>
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>
```
<br/>
The application will look like the following.
![github-user.gif](https://cdn.steemitimages.com/DQmbwWmsaiiucbWWSVyZsCR98SdP26TMurWHZ9DCttNi29Z/github-user.gif)

# Proof of Work Done
https://github.com/pckurdu/Build-github-user-application-with-react
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 99 others
properties (23)
post_id66,804,707
authorpckurdu
permlinkbuild-a-github-users-information-application-with-react
categoryutopian-io
json_metadata{"app":"steemit\/0.1","tags":["utopian-io","tutorials","react","axios","moment"],"image":["https:\/\/cdn.steemitimages.com\/DQmZrUbUFgqgF7GEKVS1KXDT6VutsEjGZhfupEvniEMXPHv\/Github%20User.fw.png"],"links":["https:\/\/github.com\/facebook\/react","https:\/\/github.com\/axios\/axios","https:\/\/github.com\/moment\/moment","https:\/\/github.com\/pckurdu","https:\/\/github.com\/pckurdu\/Build-github-user-application-with-react","https:\/\/code.visualstudio.com\/"],"format":"markdown"}
created2018-11-30 15:22:54
last_update2018-11-30 15:22:54
depth0
children3
net_rshares31,016,960,875,060
last_payout2018-12-07 15:22:54
cashout_time1969-12-31 23:59:59
total_payout_value14.280 SBD
curator_payout_value4.573 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length14,352
author_reputation23,382,389,405,576
root_title"Build A Github Users Information Application With React"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (163)
@portugalcoin ·
$7.81
Thank you for your contribution @pckurdu.
We've been reviewing your tutorial and suggest the following points below:

- In the code it's very important to have comments. Put more comments in your code so that you understand what you are developing.

- We suggest you put more theory in your tutorial on what you are explaining.

- The tutorial is very well explained and very interesting.

- We like your print screen to show the result of what you are explaining and developing.

Thanks for your good work in developing this tutorial. We are waiting for more of your tutorials.

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/8/2-1-1-3-1-2-1-3-).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
👍  , , , , , , , , ,
properties (23)
post_id66,822,897
authorportugalcoin
permlinkre-pckurdu-build-a-github-users-information-application-with-react-20181201t010658573z
categoryutopian-io
json_metadata{"users":["pckurdu"],"tags":["utopian-io"],"links":["https:\/\/join.utopian.io\/guidelines","https:\/\/review.utopian.io\/result\/8\/2-1-1-3-1-2-1-3-","https:\/\/support.utopian.io\/","https:\/\/discord.gg\/uTyJkNm","https:\/\/join.utopian.io\/"],"app":"steemit\/0.1"}
created2018-12-01 01:06:57
last_update2018-12-01 01:06:57
depth1
children1
net_rshares12,926,729,216,074
last_payout2018-12-08 01:06:57
cashout_time1969-12-31 23:59:59
total_payout_value5.916 SBD
curator_payout_value1.893 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length1,078
author_reputation214,343,891,436,406
root_title"Build A Github Users Information Application With React"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (10)
@utopian-io ·
Thank you for your review, @portugalcoin! Keep up the good work!
properties (22)
post_id66,918,418
authorutopian-io
permlinkre-re-pckurdu-build-a-github-users-information-application-with-react-20181201t010658573z-20181203t074031z
categoryutopian-io
json_metadata{"app":"beem\/0.20.9"}
created2018-12-03 07:40:33
last_update2018-12-03 07:40:33
depth2
children0
net_rshares0
last_payout2018-12-10 07:40:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length64
author_reputation152,913,012,544,965
root_title"Build A Github Users Information Application With React"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@utopian-io ·
Hey, @pckurdu!

**Thanks for contributing on Utopian**.
We’re already looking forward to your next contribution!

**Get higher incentives and support Utopian.io!**
 Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via [SteemPlus](https://chrome.google.com/webstore/detail/steemplus/mjbkjgcplmaneajhcbegoffkedeankaj?hl=en) or [Steeditor](https://steeditor.app)).

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
post_id66,842,760
authorutopian-io
permlinkre-build-a-github-users-information-application-with-react-20181201t130200z
categoryutopian-io
json_metadata{"app":"beem\/0.20.9"}
created2018-12-01 13:02:00
last_update2018-12-01 13:02:00
depth1
children0
net_rshares0
last_payout2018-12-08 13:02:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length589
author_reputation152,913,012,544,965
root_title"Build A Github Users Information Application With React"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000