Soal property,
Buatlah sebuah component dengan nama car yang mempunyai 1 properti dengan nama title dan content, component boleh d buat dengan class dan function ?
pnpm create vite
react_review_bag2
React
Javascript
cd react_review_bag2
pnpm install
pnpm run dev
buat component
//Card.jsx
import React from "react";
//class
export default class Card extends React.Component {
constructor(props){
super(props)
}
render(){
return (
<div>
<img src="https://picsum.photos/seed/andi/200/200" alt="andi" />
<h1>Ini hati </h1>
<p>yang lama sudah tidak terisi.. sedih</p>
</div>
)
}
}
selanjutnya kita panggil di App.jsx
//App.jsx
import './App.css'
import Card from './components/Card'
function App() {
return (
<div className='App'>
<Card />
<Card />
<Card />
</div>
)
}
export default App
akan kita baut props, yang memuat data yang berbeda, kita akan
Card.jsx
import React from "react";
//class
export default class Card extends React.Component {
constructor(props){
super(props)
}
render(){
return (
<div>
<img src= {this.props.img} alt="andi" />
<h1> {this.props.title} </h1>
<p> {this.props.content} </p>
</div>
)
}
}
//App.jsx
import './App.css'
import Card from './components/Card'
function App() {
return (
<div className='App'>
<Card img="https://picsum.photos/seed/andi/200/200"
title="Ini hati siapa"
content="Sudah lama tidak terisi? - Jone -
"/>
<Card
img="https://picsum.photos/seed/ismail/200/200"
title="Ini hati kamu"
content="belum lama tidak terisi? - Jone -
"/>
<Card
img="https://picsum.photos/seed/abdullah/200/200"
title="Ini hati dia"
content="akan lama tidak terisi? - Jone -
"/>
</div>
)
}
export default App
selesai dengan class component, selanjtnya kita akan menggunakan cara kedua merender file jsx dengan functional component
//Card.jsx
//functional component
export default function Card(props){
return (
<div>
<img src={props.img} alt={props.title} />
<h1>{props.title}</h1>
<p>{props.content}</p>
</div>
)
}
//App.jsx
import './App.css'
import Card from './components/Card'
function App() {
return (
<div className='App'>
<Card
img="https://picsum.photos/seed/andi/200/200"
title="Ini hati siapa"
content="Sudah lama tidak terisi? - Jone -
"/>
<Card
img="https://picsum.photos/seed/ismail/200/200"
title="Ini hati kamu"
content="belum lama tidak terisi? - Jone -
"/>
<Card img="https://picsum.photos/seed/abdullah/200/200"
title="Ini hati dia"
content="akan lama tidak terisi? - Jone -
"/>
</div>
)
}
export default App
props diatas Card.jsx adalah objek sehingga kita akan menyingkat dengan melakukan destruct
//Card.jsx
//functional component
export default function Card({ img, title, content }){
return (
<div>
<img src={img} alt={title} />
<h1>{title}</h1>
<p>{content}</p>
</div>
)
}
//App.jsx
import './App.css'
import Card from './components/Card'
function App() {
return (
<div className='App'>
<Card
img="https://picsum.photos/seed/andi/200/200"
title="Ini hati siapa"
content="Sudah lama tidak terisi? - Jone -
"/>
<Card
img="https://picsum.photos/seed/ismail/200/200"
title="Ini hati kamu"
content="belum lama tidak terisi? - Jone -
"/>
<Card
img="https://picsum.photos/seed/abdullah/200/200"
title="Ini hati dia"
content="akan lama tidak terisi? - Jone -
"/>
<Card
img={'https://picsum.photos/seed/abduh/200/200'}
title={'Atas Neraka'}
content={'Bawah Surga'}
/>
</div>
)
}
export default App
Soal nomer 2,
Buatlah sebuah komponent layout, dimana komponent tersebut bisa di isi dengan komponent lainnya..
eg:
boleh menggunakan properti biasa atau menggunakan property children.
kita buat MainLayout.jsx
//MainLayout.jsx
import React from "react";
export default function MainLayout({children}){
return (
<main>
{children}
</main>
)
}
masukkan main layout sebagai pembungkus card
//App.jsx
import "./App.css";
import Card from "./components/Card";
import MainLayout from "./layouts/MainLayout";
function App() {
return (
//<div className='App'>
<MainLayout>
<Card
img="https://picsum.photos/seed/andi/200/200"
title="Ini hati siapa"
content="Sudah lama tidak terisi? - Jone -
"
/>
<Card
img="https://picsum.photos/seed/ismail/200/200"
title="Ini hati kamu"
content="belum lama tidak terisi? - Jone -
"
/>
<Card
img="https://picsum.photos/seed/abdullah/200/200"
title="Ini hati dia"
content="akan lama tidak terisi? - Jone -
"
/>
<Card img={"https://picsum.photos/seed/abduh/200/200"} title={"Atas Neraka"} content={"Bawah Surga"} />
</MainLayout>
//</div>
);
}
export default App;
Soal state
Buatlah sebuah element h1 dan input setiap input di isi dengan value (diubah) maka konten pada h1 juga ikut berubah (State)?
berarti kita buat state dulu,
//state
const [text, setText]=useState("ubah disini")
kita tampilkan disini
<h1>{text}</h1>
<div>
<input type="text" onChange={handleChangeText} />
</div>
kita buat function penangkap valuenya
const handleChangeText = (e)=>{
console.info(e)
}
sekarang kita tahun nilai inputan kita berada di target dan value
const handleChangeText = (e)=>{
console.info(e.target.value)
}
di console berhasil manangkap valuenya sekarang, console.info kita ganti dengan setText
const handleChangeText = (e)=>{
//console.info(e.target.value)
setText(e.target.value)
}
//App.jsx
import "./App.css";
import Card from "./components/Card";
import MainLayout from "./layouts/MainLayout";
import {useState} from "react"
function App() {
//state
const [text, setText]=useState("ubah disini")
//function yang menangkap value dari element input
const handleChangeText = (e)=>{
//console.info(e.target.value)
setText(e.target.value)
}
return (
//<div className='App'>
<MainLayout>
<h1>{text}</h1>
<div>
<input type="text" onChange={handleChangeText} />
</div><br /><br />
<Card
img="https://picsum.photos/seed/andi/200/200"
title="Ini hati siapa"
content="Sudah lama tidak terisi? - Jone -
"
/>
<Card
img="https://picsum.photos/seed/ismail/200/200"
title="Ini hati kamu"
content="belum lama tidak terisi? - Jone -
"
/>
<Card
img="https://picsum.photos/seed/abdullah/200/200"
title="Ini hati dia"
content="akan lama tidak terisi? - Jone -
"
/>
<Card img={"https://picsum.photos/seed/abduh/200/200"} title={"Atas Neraka"} content={"Bawah Surga"} />
</MainLayout>
//</div>
);
}
export default App;
soal conditional rendering
kita tau kalau kompnent card kita sudah memiliki props img, yang berisi source dari gambar. apa yang terajdi apabila programer lupa mengisi props image ? tentunya muncul icon gamabr error.
seilahkan fixed bug ini dengan conditional rendering artinya element img hanya akan terrender ketika ada data di props img.
{img ? <img src={img} alt={title} /> : null }
soal fetching data
silahkan ambi data dari sebuah api end point https://jsonplaceholder.typicode.com/posts dan render menggunakan component card
note cara bebas, bisa menggunakan axios, fetch :
- ract-query nilai plus
- custom hook nilai plus
Jawabannya :
kita buat Fetchapi.jsx
import React from 'react'
import { useState, useEffect } from 'react'
export default function FetchApi() {
const [post, setPost]= useState();
const getPost = async()=>{
try{
const result = await fetch("https://jsonplaceholder.typicode.com/posts")
const data = await result.json();
return data
}
catch (error){
console.error(error)
}
}
//useeeffect
useEffect(()=>{
getPost()
.then((res)=>{setPost(res)})
.catch((err)=>{console.error(err)})
}, [])
return (
<div>
<h1>Fetch Api</h1>
{post.map((e)=>(
<div key={e.id}>
<h3>{e.title}</h3>
<p>{e.body}</p>
</div>
))}
</div>
)
}
selanjutnya kita import ke dalam App.jsx
`import FetchApi from "./components/FetchApi";
return
`
ada beberapa cara menghandle error conditional rendering diantaranya :
Tambahkan array
const [post, setPost]= useState([]);
atau tambahkan if
if(!post){
return <p>loading...</p>
}
atau bisa juga post?.
{post?.map((e)=>(
//FetchApi.jsx
import React from 'react'
import { useState, useEffect } from 'react'
export default function FetchApi() {
const [post, setPost]= useState([]);
const getPost = async()=>{
try{
const result = await fetch("https://jsonplaceholder.typicode.com/posts")
const data = await result.json();
return data
}
catch (error){
console.error(error)
}
}
//useeeffect
useEffect(()=>{
getPost()
.then((res)=>{setPost(res)})
.catch((err)=>{console.error(err)})
}, [])
return (
<div>
<h1>Fetch Api</h1>
{post.map((e)=>(
<div key={e.id}>
<h3>{e.title}</h3>
<p>{e.body}</p>
</div>
))}
</div>
)
}
//App.jsx
import "./App.css";
import Card from "./components/Card";
import MainLayout from "./layouts/MainLayout";
import {useState} from "react"
import FetchApi from "./components/FetchApi";
function App() {
//state
const [text, setText]=useState("ubah disini")
//function yang menangkap value dari element input
const handleChangeText = (e)=>{
//console.info(e.target.value)
setText(e.target.value)
}
return (
//<div className='App'>
<MainLayout>
<FetchApi />
<br /><br />
<h1>{text}</h1>
<div>
<input type="text" onChange={handleChangeText} />
</div><br /><br />
<Card
img="https://picsum.photos/seed/andi/200/200"
title="Ini hati siapa"
content="Sudah lama tidak terisi? - Jone -
"
/>
<Card
img="https://picsum.photos/seed/ismail/200/200"
title="Ini hati kamu"
content="belum lama tidak terisi? - Jone -
"
/>
<Card
img="https://picsum.photos/seed/abdullah/200/200"
title="Ini hati dia"
content="akan lama tidak terisi? - Jone -
"
/>
<Card img={"https://picsum.photos/seed/abduh/200/200"} title={"Atas Neraka"} content={"Bawah Surga"} />
</MainLayout>
//</div>
);
}
export default App;
Terimkasih.
https://github.com/andiks2018/JvalleyReact-reviewBag2.git
Top comments (0)