# [React x Django] React Setup
1. 建立資料夾
2. 安裝React:```npm create-react-app frontend```
3. 執行
> cd frontend
> npm start
---
### 改icon
frontend資料夾中的ico檔案移除，換成自己想要的favicon.ico檔
[製作favicon](https://formito.com/tools/favicon?ref=techmoon)
> frontend/public中：
> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
> 會去讀取這個icon檔案
---
### 設置 Header, Footer
frontend/src 中，建立components資料夾
然後分別新增```Header.js```, ```Footer.js``` 檔案
建議在VScode中Extension安裝
```ES7 React/Redux/GraphQL/React-Native snippets```
這個套件可以快速展開許多React 模板
此處使用```rfce```來展開Head, Footer
```Header.js```
```javascript=
import React from 'react'
function Header() {
return (
<div>
<header>Header</header>
</div>
)
}
export default Header
```
```Footer.js```
```javascript=
import React from 'react'
function Footer() {
return (
<div>
<footer>Footer</footer>
</div>
)
}
export default Footer
```
放入```App.js```來顯示
（記得先import元件，再用tag來使用）
```import Header from './components/Header'```
```'./components/Header'``` : 為component
```Header```：Module name
```javascript=
import Header from './components/Header'
import Footer from './components/Footer'
function App() {
return (
<div>
<Header />
<main>
<h1>Welcome</h1>
</main>
<Footer />
</div>
);
}
export default App;
```
此時：
---
### 刪除用不到的檔案
因為要自己客製化
```frontend/src/``` 中 :
>```setupTest.js ```,
```App.css```,
```App.test.js```
都刪除
並把```App.js```中的```<header>```內容都移除。
---
### 客製化顯示
使用React Bootstrap
[React Bootstrap](https://react-bootstrap.github.io)
模板
[Bootstrap Watch](https://bootswatch.com)
#### 安裝 React Bootstrap
```npm install react-bootstrap bootstrap```
> 使用React Bootstrap，這個套件把Bootstrap components全部重製成React component的模式，讓人不另外載入script或jquery，用加載React component的方式就能使用。
>不過React bootstrap就只有component功能而已，style的部分要另外從bootstrap載入。
[React Bootstrap介紹](https://ithelp.ithome.com.tw/articles/10239905)
#### 選個喜歡的模板CSS檔下載下來
（範例選用```Lux```）
放入```frontend/src```中
回到vscode
將src/index.js導入剛剛的css
```import './bootstrap.min.css'```
為了能讓conponent被套上bootsrtap
我們需要import ```react-bootstrap```
在```App.js```中
```javascript=
import { Container } from 'react-bootstrap'//導入需要的component
```
>還能使用這些
> ```
> import {
> Navbar,
> Nav,
> NavDropdown,
> Form,
> FormControl,
> Button,
> } from "react-bootstrap";
>
```javascript=
import { Container } from 'react-bootstrap'
import Header from './components/Header'
import Footer from './components/Footer'
function App() {
return (
<div>
<Header />
<main className="py-3">
<Container>
<h1>Welcome</h1>
</Container>
</main>
<Footer />
</div>
);
}
export default App;
```
```Footer.js``` 調整
```javascript=
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
function Footer() {
return (
<div>
<Container>
<Row>
<Col className="text-center py-3">Copyright © Ezra Lin</Col>
</Row>
</Container>
</div>
)
}
export default Footer
```
```src/index.css``` 做一些公版的調整
```css=
/*針對main這個tag去做調整*/
main{
min-height: 80vh;
}
```
```Head.js``` 放入bootstrap ```Navbar```
[Navbar程式碼](https://react-bootstrap.github.io/components/navbar/)
```javascript=
import React from 'react'
import { Navbar, Nav, Container, Row } from 'react-bootstrap'
function Header() {
return (
<header>
<Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
<Container>
<Navbar.Brand href="/">Ezra's Web</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/cart">Cart</Nav.Link>
<Nav.Link href="/login">Login</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</header>
)
}
export default Header
```
#### 在Navbar選項放入圖示
[CDNjs.com](https://cdnjs.com)
```Copy Link Tag```
複製連結後到frontend/public底下的index.html
貼上
```html=
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
```
導入這個函式庫以後
在到有Navbar的```Header.js```
購物車icon
```javascript=
<i className="fas fa-shopping-cart"></i>
```
找到要插入icon的地方做調整
```javascript=
<Nav.Link href="/cart"><i className="fas fa-shopping-cart"></i>Cart</Nav.Link>
```
```Header.js```程式碼:
```javascript=
import React from 'react'
import { Navbar, Nav, Container, Row } from 'react-bootstrap'
function Header() {
return (
<header>
<Navbar bg="dark" variant="dark" expand="lg" collapseOnSelect>
<Container>
<Navbar.Brand href="/">Ezra's Web</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/cart"><i className="fas fa-shopping-cart"></i>Cart</Nav.Link>
<Nav.Link href="/login"><i className="fas fa-user"></i>Login</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</header>
)
}
export default Header
```
目前畫面：
---
### Card Product Listing
### Rating
目前畫面：
Sign in with Wallet
Connect another wallet