Practice Lesson 6-1

Practices for Lesson 6: Use
case - Creating GitHub

Portfolio using ReactJS
Copyright © 2022, Proton Expert Systems & Solutions. All rights reserved
1 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

Practices for Lesson 6
Overview
In the practices for this lesson, you will create a GitHub portfolio website using ReactJS.

Practice of 6-1: Creating GitHub Portfolio using ReactJS
Overview
In this practice, you will learn to use styled-components and to reuse ReactJS components.
Time: 45 min
Assumptions
You should have completed the Practice 5-4.
Tasks:
1. Create new ReactJS application.
a. Open command prompt and execute the below command.
Note: github-portfolio is the ReactJS project name.
npx create-react-app github-portfolio
b. Execute the below command in the command prompt.

cd github-porfolio
c. Run the ReactJS application by executing below command in command prompt.

npm start
d. Open the browser with URL and verify the output as shown below.
2. Install styled-components in ReactJS project.

a. Execute the below command in command prompt to install styled-components.
Note: If development server is running, terminate it by Ctrl+C.
npm install styled-components –save
b. Execute the below command in command prompt to run ReactJS application.

npm start
3. Downloading GitHub logo pack.

a. Using browser, open below URL to download Github logo pack.
Link: https://github-media-downloads.s3.amazonaws.com/GitHub-Mark.zip.
b. Navigate to download folder and extract images from zip file.
c. Copy the GitHub-Mark-Light-64px.png image and paste in src directory as shown
below.
4. Building Reusable ReactJS components.

a. Create two new directories called Components and Containers inside src
directory as shown below.
b. Create new JavaScript file called Header.js file inside Components directory.

c. Copy the code given below and paste it in Header.js file.
import React from 'react';
import styled from 'styled-components';
import logo from '../../GitHub-Mark-Light-64px.png';
const HeaderWrapper = styled.div`

background-color: #282c34;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
`;
const Logo = styled.img`

height: 64px;
pointer-events: none;
`;
const Header = () => (

<HeaderWrapper>
<Logo src={logo} alt='logo' />
<h1>My Github Portfolio</h1>
</HeaderWrapper>
);
export default Header;

d. Create two new JavaScript files named Link.js and List.js in Components
directory as shown below.
e. Copy the code given below and paste it in Link.js file.

const InnerLink = styled.a`

color: #61dafb;
`;
const Link = ({ url, title }) => (

<InnerLink href={url} target='_blank' rel='noopener
noreferrer'>

{title}
</InnerLink>
);
export default Link;
f. Copy the code given below and paste it in List.js file.

const Title = styled.h2`

padding: 10px 0;
border-bottom: 1px solid lightGrey;
`;
const ListWrapper = styled.ul`

list-style: none;
text-align: left;
padding: 0;
`;
const ListItem = styled.li`

display: flex;
justify-content: space-between;
`;
const Label = styled.span`

font-weight: bold;
`;
const List = ({ items, title }) => (

<>
<Title>{title}</Title>

<ListWrapper>
{items.map(item => (
<ListItem key={item.label}>
<Label>{item.label}</Label>
{item.value}
</ListItem>
))}
</ListWrapper>
</>
);
export default List;

g. Create new JavaScript file named Profile.js in Containers folder as shown below.

h. Copy the code given below and paste it in Profile.js file.
Note: In the URL 'https://api.github.com/users/GITHUB_USERNAME' mention your
GitHub username
import React,{useEffect,useState} from 'react'

import Link from '../Components/Link';
import List from '../Components/List';
import styled from ‘styled-components’;
const ProfileWrapper = styled.div`

width: 50%;
margin: 10px auto;
`;
const Avatar = styled.img`

width: 150px;
`;
function Profile() {
const [git, setGit] = useState({
data:{},
repoitories:[],
loading:true,
error:''
})
useEffect(() => {
let mounted = true
async function fetchData(){
if(mounted){
try {
const profile = await
fetch('https://api.github.com/users/GITHUB_USERNAME');
const profileJSON = await profile.json();
if(profileJSON){
const repos = await
fetch(profileJSON.repos_url);
const repoJSON = await repos.json();
console.log(repoJSON)
setGit({
...git,
data:profileJSON,
10 Practice of Lesson 6: Use case - Creating GitHub Portfolio using

ReactJS
repoitories:repoJSON,
loading:false
})
}
} catch (error) {
setGit({
loading:false,
error:error.message
})
}
}
}
fetchData()
return function cleanup() {
mounted = false
}
}, [])
if(git.loading || git.error){
return <div>{git.loading ? 'Loading...' :
git.error}</div>;
}
const items=[
{label:'html_url',value:<Link url={git.data.html_url}
title='Github URL'/>},
{label:'respos_url',value:git.data.repos_url},
{label:'name:',value:git.data.name},
{label:'location',value:git.data.location},
{label:'email:',value:git.data.email},
{label:'public_repos:',value:git.data.public_repos},
{label:'created_at',value:git.data.created_at}
]
const projects=git.repoitories.map(respository=>({
label:respository.name,
value:<Link url={respository.html_url} title='Github
URL' />
}))
return (
<ProfileWrapper>
<Avatar className="Profile-avatar"
src={git.data.avatar_url}></Avatar>
<List title='Profile' items={items}/>
<List title='Projects' items={projects}/>
</ProfileWrapper>
)
}
export default Profile

ReactJS
i. Copy the code given below and paste it in App.js file.
import './App.css';
import Header from './Components/Header'
import Profile from './Containers/Profile';
function App() {
return (
<div className='App'>
<Header/>
<Profile/>
</div>
);
}
export default App;
j. Open the browser and verify the output.

k. Close the command prompt and browser.

ReactJS

Practice Lesson 6-1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practice Lesson 6-1

Uploaded by

Copyright:

Available Formats

Practices for Lesson 6: Use

case - Creating GitHub

1 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

2 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

b. Execute the below command in the command prompt.

c. Run the ReactJS application by executing below command in command prompt.

2. Install styled-components in ReactJS project.

b. Execute the below command in command prompt to run ReactJS application.

3. Downloading GitHub logo pack.

3 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

4. Building Reusable ReactJS components.

4 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

const HeaderWrapper = styled.div`

const Logo = styled.img`

const Header = () => (

export default Header;

5 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

e. Copy the code given below and paste it in Link.js file.

const InnerLink = styled.a`

const Link = ({ url, title }) => (

6 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

export default Link;

f. Copy the code given below and paste it in List.js file.

import React from 'react';

const Title = styled.h2`

const ListWrapper = styled.ul`

const ListItem = styled.li`

const Label = styled.span`

const List = ({ items, title }) => (

7 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

export default List;

8 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

9 Practice of Lesson 6: Use case - Creating GitHub Portfolio using ReactJS

import React,{useEffect,useState} from 'react'

const ProfileWrapper = styled.div`

const Avatar = styled.img`

10 Practice of Lesson 6: Use case - Creating GitHub Portfolio using

export default Profile

11 Practice of Lesson 6: Use case - Creating GitHub Portfolio using

export default App;

j. Open the browser and verify the output.

12 Practice of Lesson 6: Use case - Creating GitHub Portfolio using

You might also like