This is a step by step article on how to build a analytics tool for profiles, using . The emphasis was placed on achieving functionality quickly, therefore the end result does require further code refactoring and styling. The article is formed of two parts ( , ) and is based on the following repository. It is also hosted in this . Please note that both the repository and the website will evolve beyond these two articles. basic GitHub React Part 1 Part 2 GitHub website To begin load create-react-app (this is assuming npm and create react app are already installed) create-react-app github_analytics Once this has been completed , change directories with and enter to check that everything is working fine. You should see the following page in the browser. cd github_analytics npm start Begin by deleting the following files: , , . Change name to (don’t forget its imports in and ). Also chance its content to the following: logo.svg index.css App.css App.js App.jsx App.test.jsx index.js import React, { Component } from 'react'; class App extends Component {render() {return (<div className="App"><header className="App-header"><h1 className="App-title">GitHub Analytics</h1></header><p className="App-intro">Watch this space...</p></div>);}} export default App; Create sub-folder in . Here lets create our first component as follows: components src Button.jsx import React from 'react'; const Button = (props) => {return (<button className='button' onClick={()=>{props.handleClick()}}>Search</button>)}; export default Button; Adjust to the following: App.jsx import React, { Component } from 'react';import Button from './components/Button.jsx'; class App extends Component {constructor() {super();this.handleClick = this.handleClick.bind(this)} handleClick(e) {alert("The button was clicked");} render() {return (<div className="App"><header className="App-header"><h1 className="App-title">GitHub Analytics</h1></header><p className="App-intro">Watch this space...</p><Button handleClick={this.handleClick}/></div>);}} export default App; This should result in alert, when pressing on button. The button was clicked! Search Next we will need to run . This installs axios, which allows to make HTTP requests. Once it has been installed, will need to be changed to: npm install axios -save App.jsx import React, { Component } from 'react';import Button from './components/Button.jsx';import axios from 'axios'; class App extends Component {constructor() {super();this.state = {username: 'No username',info: ''}this.handleClick = this.handleClick.bind(this)} handleClick(e) {axios.get(' ).then(response => this.setState({username: response.data.login,info : JSON.stringify(response.data, undefined, 2)}));} https://api.github.com/users/drastorguev' render() {return (<div className="App"><header className="App-header"><h1 className="App-title">GitHub Analytics</h1></header><p className="App-intro">Watch this space...</p><Button handleClick={this.handleClick}/><p><b>Username:</b></p><p>{this.state.username}</p><b>Information:</b><pre>{this.state.info}</pre></div>);}} export default App; This results in data being automatically collected for my GitHub account. Finally, we will replace button with a form to allow users to search GitHub by username. To do this, we first need to create component. Search Form.jsx import React from 'react'; const Form = (props) => {return ( <form onSubmit={(event) => props.handleUserFormSubmit(event)}><label><p>Search:</p><input name="username"type="text"placeholder="GitHub username"requiredvalue={props.formData.username}onChange={props.handleFormChange}/></label><div><inputtype="submit"value="Submit"/></div></form> )}; export default Form; Similarly, will need to be replaced as follows: App.jsx import React, { Component } from 'react';import axios from 'axios'; import Form from './components/Form.jsx'; class App extends Component {constructor() {super();this.state = {gitun: 'No username',info: '',formData: {username: '',}}this.handleUserFormSubmit = this.handleUserFormSubmit.bind(this);this.handleFormChange= this.handleFormChange.bind(this);} handleUserFormSubmit(event) {event.preventDefault();axios.get(' ).then(response => this.setState({gitun: response.data.login,info : JSON.stringify(response.data, undefined, 2)})).catch((err) => { console.log(err); });}; https://api.github.com/users/'+this.state.formData.username handleFormChange(event) {const obj = this.state.formData;obj[event.target.name] = event.target.value;this.setState(obj);}; render() {return (<div className="App"><header className="App-header"><h1 className="App-title">GitHub Analytics</h1></header><p className="App-intro">Watch this space...</p><FormformData={this.state.formData}handleUserFormSubmit={this.handleUserFormSubmit}handleFormChange={this.handleFormChange}/><p><b>Username:</b></p><p>{this.state.gitun}</p><b>Information:</b><pre>{this.state.info}</pre> </div>);}} export default App; Your page should look some similar to a screenshot below. We are now able to to request any data from GitHub API and display it on our webpage. Therefore, this concludes . In we will add 3 different sections: basic information, list of most popular and starred repos and, finally, analyse most common languages of user’s own repos and generate keywords to starred repos. Part 1 Part 2 Feel free to track the progress of this project on and on its . GitHub website
