2.RECT入門-3日目(feat.Bootstrap)
実装されたスクリーン
コード#コード#
App.jsimport './App.css';
import { Navbar, Container, Nav, Button } from 'react-bootstrap';
import { useState } from 'react';
import Data from './data';
import { Link, Route, Switch } from 'react-router-dom';
import Detail from './Detail'
function App() {
let [shoes, shoes변경] = useState(Data);
return (
<div className="App">
<Navbar bg="light" variant="light">
<Container>
<Navbar.Brand>ShoeShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link><Link to="/" className="text">Home</Link></Nav.Link>
<Nav.Link><Link to="/detail" className="text">Detail</Link></Nav.Link>
</Nav>
</Container>
</Navbar>
<Switch>
<Route exact path="/">
<div className="jumbotron">
<h1>20% Season OFF</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident maiores doloribus, quos similique perferendis fugit et accusantium,
<br/>iusto dolor labore suscipit laboriosam ullam unde eum voluptatum debitis, rem voluptate ipsa.
</p>
<p>
<Button variant="primary">Learn more</Button>{' '}
</p>
</div>
<div className="container">
<div className="row">
{
shoes.map((el, i)=>{
return <Card shoes = { shoes[i] } i = { i } key = { i } />
})
}
{/* <Card shoes = { shoes[0] } />
<Card shoes = { shoes[1] } />
<Card shoes = { shoes[2] } /> */}
</div>
</div>
</Route>
<Route path="/detail/:id">
<Detail shoes = { shoes } />
</Route>
</Switch>
</div>
);
}
function Card(props) {
return (
<div className="col-md-4" key={props.key}>
<img src={ 'https://codingapple1.github.io/shop/shoes' + (props.i + 1) + '.jpg' } width="100%" />
<h4> { props.shoes.title } </h4>
<p>{ props.shoes.content } & { props.shoes.price }</p>
</div>
)
}
export default App;
Detail.jsimport React from 'react';
import { useHistory, useParams } from 'react-router-dom';
function Detail(props) {
let { id } = useParams();
let history = useHistory();
let 찾은상품 = props.shoes.find(function(상품){ return 상품.id == id });
return (
<div className="container">
<div className="row">
<div className="col-md-6">
<img src={"https://codingapple1.github.io/shop/shoes" + [Number(id) + 1] + ".jpg"} width="100%" />
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{ 찾은상품.title }</h4>
<p>{ 찾은상품.content }</p>
<p>{ 찾은상품.price }</p>
<button className="btn btn-danger">주문하기</button>
<button className="btn btn-danger" onClick={()=>{
history.goBack();
}}>뒤로가기</button>
</div>
</div>
</div>
);
}
export default Detail;
Data.jsexport default [
{
id : 0,
title : "White and Black",
content : "Born in France",
price : 120000
},
{
id : 1,
title : "Red Knit",
content : "Born in Seoul",
price : 110000
},
{
id : 2,
title : "Grey Yordan",
content : "Born in the States",
price : 130000
}
]
Reference
この問題について(2.RECT入門-3日目(feat.Bootstrap)), 我々は、より多くの情報をここで見つけました
https://velog.io/@starkdy/2.-REACT-입문-3일차feat.-Bootstrap
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
App.js
import './App.css';
import { Navbar, Container, Nav, Button } from 'react-bootstrap';
import { useState } from 'react';
import Data from './data';
import { Link, Route, Switch } from 'react-router-dom';
import Detail from './Detail'
function App() {
let [shoes, shoes변경] = useState(Data);
return (
<div className="App">
<Navbar bg="light" variant="light">
<Container>
<Navbar.Brand>ShoeShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link><Link to="/" className="text">Home</Link></Nav.Link>
<Nav.Link><Link to="/detail" className="text">Detail</Link></Nav.Link>
</Nav>
</Container>
</Navbar>
<Switch>
<Route exact path="/">
<div className="jumbotron">
<h1>20% Season OFF</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident maiores doloribus, quos similique perferendis fugit et accusantium,
<br/>iusto dolor labore suscipit laboriosam ullam unde eum voluptatum debitis, rem voluptate ipsa.
</p>
<p>
<Button variant="primary">Learn more</Button>{' '}
</p>
</div>
<div className="container">
<div className="row">
{
shoes.map((el, i)=>{
return <Card shoes = { shoes[i] } i = { i } key = { i } />
})
}
{/* <Card shoes = { shoes[0] } />
<Card shoes = { shoes[1] } />
<Card shoes = { shoes[2] } /> */}
</div>
</div>
</Route>
<Route path="/detail/:id">
<Detail shoes = { shoes } />
</Route>
</Switch>
</div>
);
}
function Card(props) {
return (
<div className="col-md-4" key={props.key}>
<img src={ 'https://codingapple1.github.io/shop/shoes' + (props.i + 1) + '.jpg' } width="100%" />
<h4> { props.shoes.title } </h4>
<p>{ props.shoes.content } & { props.shoes.price }</p>
</div>
)
}
export default App;
Detail.jsimport React from 'react';
import { useHistory, useParams } from 'react-router-dom';
function Detail(props) {
let { id } = useParams();
let history = useHistory();
let 찾은상품 = props.shoes.find(function(상품){ return 상품.id == id });
return (
<div className="container">
<div className="row">
<div className="col-md-6">
<img src={"https://codingapple1.github.io/shop/shoes" + [Number(id) + 1] + ".jpg"} width="100%" />
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{ 찾은상품.title }</h4>
<p>{ 찾은상품.content }</p>
<p>{ 찾은상품.price }</p>
<button className="btn btn-danger">주문하기</button>
<button className="btn btn-danger" onClick={()=>{
history.goBack();
}}>뒤로가기</button>
</div>
</div>
</div>
);
}
export default Detail;
Data.jsexport default [
{
id : 0,
title : "White and Black",
content : "Born in France",
price : 120000
},
{
id : 1,
title : "Red Knit",
content : "Born in Seoul",
price : 110000
},
{
id : 2,
title : "Grey Yordan",
content : "Born in the States",
price : 130000
}
]
Reference
この問題について(2.RECT入門-3日目(feat.Bootstrap)), 我々は、より多くの情報をここで見つけました https://velog.io/@starkdy/2.-REACT-입문-3일차feat.-Bootstrapテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol