Scribd
Upload
22 views33 pages

Post 60b361c747496

This document summarizes a React JS fundamentals batch that covers creating a React app, installing Material UI, responsive meta tags, creating tables with Material UI, fetching and displaying API data, and the React lifecycle. It provides an example of fetching COVID-19 case data from an API and displaying it in a table. The instructor encourages connecting on GitHub and LinkedIn for further discussion.

Uploaded by

alvin putra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views33 pages

Post 60b361c747496

This document summarizes a React JS fundamentals batch that covers creating a React app, installing Material UI, responsive meta tags, creating tables with Material UI, fetching and displaying API data, and the React lifecycle. It provides an example of fetching COVID-19 case data from an API and displaying it in a table. The instructor encourages connecting on GitHub and LinkedIn for further discussion.

Uploaded by

alvin putra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

“React JS Fundamental Batch 1”

By: Onesinus Saut Parulian


Create React App
npx create-react-app corona-app
Material UI Installation
npm install @material-ui/core
“Tak kenal maka tak sayang”

Onesinus Saut Parulian


Software Developer

Background: IT Networking Passion:


Coding

Latar Belakang Pekerjaan:

PT. Parsaoran Global Datatrans [Technical Support]


PT. Sentra Inovasi Solusindo [PHP Developer]
PT. Integral Indonesia Asia Pasifik [Senior Developer]
PT. Supranusa Sindata [Web Programmer]
“Publikasi”
https://reactjs.org/
localhost:3000
Our First Code!
Class vs Functional Component
UI Framework
Material UI Responsive Meta Tag
public/index.html

<title>Corona App</title>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
Basic Material UI
Create Table with Material UI
Import Component

import { makeStyles } from '@material-ui/core/styles';


import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
Declare variable for styles

const useStyles = makeStyles({


table: {
minWidth: 650
},
});

const classes = useStyles();


Create variable for dummy data

const rows = [
{name: 'Onesinus SPT', age: 17},
{name: 'Ucok', age: 62}
];
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
Tools / Package for Fetch data
Fetch Methods
Common response type fetch
Tools for hit API ( Rest Client )
Complete React Life Cycle
Common Life Cycle
https://api.thevirustracker.com/free-api?countryTimeline=ID
Try Fetch in console
Implement in code?
import React, { useEffect, useState } from 'react';

const [rows, setRows] = useState({});

useEffect(() => {
fetch('https://api.thevirustracker.com/free-api?countryTimeline=ID')
.then(response => { return response.json() } )
.then(data => {
setRows(data.timelineitems[0]);
});
}, []);
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Total Cases</TableCell>
<TableCell>Total Recoveries</TableCell>
<TableCell>Total Deaths</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.keys(rows).map((key) => (
<TableRow key={key}>
<TableCell>{key}</TableCell>
<TableCell>{rows[key].total_cases}</TableCell>
<TableCell>{rows[key].total_recoveries}</TableCell>
<TableCell>{rows[key].total_deaths}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
Let’s connect
https://github.com/onesinus
https://www.linkedin.com/in/onesinus/

You might also like