Welcome Learner today in this blog post we will be using React.js User Profile Card in Browser Via Github API With Javascript. All the Complete source code of the application is shown Down.
In order to lets started, you need to make a file index.html and copy-paste the mentioned code.
index.html
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
style.css
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,900");
* {
box-sizing: border-box;
}
body {
margin-top: 2rem;
font-family: 'Lato', sans-serif;
background: #00b9ce;
color: #fff;
-webkit-font-smoothing: antialiased;
font-size: 1.1rem;
}
.searchbox {
max-width: 20rem;
margin: 1rem auto;
}
.searchbox__input {
height: 3rem;
width: 100%;
box-shadow: none;
border: none;
padding: 0 1rem;
color: #003d44;
border-radius: 0.2rem;
}
.searchbox__button {
width: 100%;
padding: 1rem 2rem;
border: none;
margin: 1rem 0 0 0;
background: #11e7ff;
color: #006b77;
font-weight: 700;
border-radius: 0.4rem;
}
.searchbox__button:hover {
background: #00def6;
}
.card {
position: relative;
background: #00b0c3;
max-width: 20rem;
margin: 7rem auto 2rem;
border: solid 5px #09a;
border-radius: 0.4rem;
padding: 5.5rem 2.5rem 1rem;
}
.card__avatar {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 10rem;
height: auto;
text-align: center;
margin: 0 auto;
display: block;
border-radius: 50%;
background: #09a;
padding: 5px;
max-width: 100%;
transition: 0.2s;
}
.card__avatar:hover {
background: #008290;
}
.card__username {
font-size: 2rem;
font-weight: 900;
text-align: center;
margin: 1rem auto;
}
.card__link {
color: #fff;
border-bottom: solid 2px #fff;
text-decoration: none;
margin-bottom: 0;
padding-bottom: 0;
}
.card__link:hover {
opacity: 0.8;
}
.card__notfound {
text-align: center;
margin: 0 auto;
padding: 1rem;
}
/* some non-BEM stuff to avoid overloading the JSX for demo purposes */
dl {
margin: 0;
padding: 0;
}
dt,
dd {
text-align: center;
}
dt {
font-weight: 900;
margin-bottom: 0.2rem;
}
dd {
margin: 0 0 1rem 0;
}
And now create a script.js
file and copy-paste the Given code.
script.js
"use strict";
const Component = React.Component;
class App extends Component {
constructor(props) {
super(props);
this.state = {
username: 'simonswiss',
realName: '',
avatar: '',
location: '',
repos: '',
followers: '',
url: '',
notFound: ''
};
}
render() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SearchBox, {
fetchUser: this.fetchUser.bind(this)
}), /*#__PURE__*/React.createElement(Card, {
data: this.state
}));
} // the api request function
fetchApi(url) {
fetch(url).then(res => res.json()).then(data => {
// update state with API data
this.setState({
username: data.login,
realName: data.name,
avatar: data.avatar_url,
location: data.location,
repos: data.public_repos,
followers: data.followers,
url: data.html_url,
notFound: data.message
});
}).catch(err => console.log('oh no!'));
}
fetchUser(username) {
let url = `https://api.github.com/users/${username}`;
this.fetchApi(url);
}
componentDidMount() {
let url = `https://api.github.com/users/${this.state.username}`;
this.fetchApi(url);
}
}
class SearchBox extends Component {
render() {
return /*#__PURE__*/React.createElement("form", {
className: "searchbox",
onSubmit: this.handleClick.bind(this)
}, /*#__PURE__*/React.createElement("input", {
ref: "search",
className: "searchbox__input",
type: "text",
placeholder: "type username..."
}), /*#__PURE__*/React.createElement("input", {
type: "submit",
className: "searchbox__button",
value: "Search GitHub User"
}));
}
handleClick(e) {
e.preventDefault();
let username = this.refs.search.getDOMNode().value; // sending the username value to parent component to fetch new data from API
this.props.fetchUser(username);
this.refs.search.getDOMNode().value = '';
}
}
class Card extends Component {
render() {
let data = this.props.data;
if (data.notFound === 'Not Found') {
// when username is not found...
return /*#__PURE__*/React.createElement("h3", {
className: "card__notfound"
}, "User not found. Try again!");
} else {
// if username found, then...
return /*#__PURE__*/React.createElement("div", {
className: "card"
}, /*#__PURE__*/React.createElement("a", {
href: data.url,
target: "_blank"
}, /*#__PURE__*/React.createElement("img", {
className: "card__avatar",
src: data.avatar
})), /*#__PURE__*/React.createElement("h2", {
className: "card__username"
}, /*#__PURE__*/React.createElement("a", {
className: "card__link",
href: data.url,
target: "_blank"
}, data.username)), /*#__PURE__*/React.createElement("dl", null, /*#__PURE__*/React.createElement("dt", null, "Real name"), /*#__PURE__*/React.createElement("dd", null, data.realName), /*#__PURE__*/React.createElement("dt", null, "Location"), /*#__PURE__*/React.createElement("dd", null, data.location), /*#__PURE__*/React.createElement("dt", null, "Number of public repos"), /*#__PURE__*/React.createElement("dd", null, data.repos), /*#__PURE__*/React.createElement("dt", null, "Number of followers"), /*#__PURE__*/React.createElement("dd", null, data.followers)));
}
}
}
React.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('app'));