https://github.com/facebook/react
https://github.com/axios/axios
https://github.com/moment/moment
https://github.com/pckurdu/Build-github-user-application-with-react
setState()AxiosMomentJsMaterialize CSS frameworkI 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.
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.
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.
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.
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.
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>
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>
)
}
}
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.
https://github.com/pckurdu/Build-github-user-application-with-react