# Garrick信仲 | C0051202 Cryptocamp第5期第三週作業
## 開發環境

| OS | VS Code | Node.js | React | React-icons | Axios |
| -------- | -------- | -------- | -------- | -------- | -------- |
| Ubuntu 22.04 | 1.76.2 | 18.15.0 | 18.2.0 | 4.8.0 | 1.3.4 |

## useContext作業
codepen網址 : [https://codepen.io/GarrickChen/pen/KKxJwNq](https://codepen.io/GarrickChen/pen/KKxJwNq)

執行結果

程式內容

// import React React.CreteContext()

const ThemeContext = React.createContext()
// Context Provider 
function MainComponent() {
	const [user, setUser] = React.useState('GarrickChen')
	
	return (
		<>
			<ThemeContext.Provider value={user}>
				<Dashboard />
				<Login />
			</ThemeContext.Provider>
			
		</>
	)
}

function Dashboard() {
	const user = React.useContext(ThemeContext)
	
	return (
		<>
      <h2 style={{color: 'blueviolet'}}>{`關於 About 頁面，使用者名稱： ${user}`}</h2>
    </>
	)
}

function Login() {
	const user = React.useContext(ThemeContext)
	
	 return (
    <>
      <h2 style={{color: 'red'}}>{`會員中心 MemberCenter 頁面，使用者名稱： ${user}`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<MainComponent />)

---

---

---

## 基本作業

1. 請跟著直播上課內容完成 React TodoList，並部署到 Vercel
1. 有基本的新增、完成、刪除待辦事項功能，並可篩選已完成、未完成資料

基本作業Github程式碼：[https://gitlab.com/mouseslayer1/reacttodolist](https://gitlab.com/mouseslayer1/reacttodolist)
基本作業網址（另加上修改text功能當練習）：[https://reacttodolist-eight.vercel.app/](https://reacttodolist-eight.vercel.app/)


---

---

---

## 進階作業

1. 用 Vite 建立 React 專案
1. 串接 Unsplash 搜尋相片 API https://api.unsplash.com/search/photos API，使用者可以輸入 input 關鍵字，並請求 Unsplash 相簿資料，並顯示圖片出來。如下圖
1. 不需要做分頁、懶加載
1. 將網站部署到 Vercel
1. 提交作業請附上 Github 程式碼、網址

進階作業Github程式碼：[`https://gitlab.com/mouseslayer1/unsplash_test`](https://gitlab.com/mouseslayer1/unsplash_test)
進階作業網址：[https://unsplash-test-iifc.vercel.app/](https://unsplash-test-iifc.vercel.app/)

懶加載使用了LazyLoadImage, 參考網址：[https://www.npmjs.com/package/react-lazy-load-image-component](https://www.npmjs.com/package/react-lazy-load-image-component)

unsplash-js的Github:[https://github.com/unsplash/unsplash-js](https://github.com/unsplash/unsplash-js)

實作程式參考網址：[https://stackblitz.com/edit/unsplash-js-javascript?file=src%2Findex.js](https://stackblitz.com/edit/unsplash-js-javascript?file=src%2Findex.js)


## 問題與解法
#### 遇到本地git預設都commit到master的branch，但是Gitlab上建立的Project都是在main branch，使用以下指令將master改成main然後再下commit和push，但是又遇到push失敗的狀況，只好再使用pull後再往上push,指令如下：

git init
git add .
git status
git git remote add origin [Gitlab上Project的ssh那串位址]
git remote -v                     //確認加上的ssh位址
git branch --show-current         //顯示現在的branch
git branch -m master main         //將master換為main
git pull origin main --rebase     //先把Gitlab上的Project檔案同步並merge到本地
git push origin main -u           //將本地的檔案同步到Gitlab的Porject裡

#### 試過另一種方式是直接使用master將檔案push到Gitlab的Project上，這時去看Project會出現master的分支，再使用merge將master合併到main。

---

#### （未解決）進階題的input在輸字時畫面都會跳，估計是重render了但還在找尋解法