①React + Firebase + Google-API を使用して、Googleクローンを作成してみる。

#概要
React,Firebase, Google-APIを使って、Googleのクローンを作成します。
流行りのMarerial-UIも使用しています。
長くなるので、ReactのフロントエンドとGoogle-API,Firebaseを使用したバックエンドは分けて投稿する予定です。

デプロイ先
URL: https://clone-6bd5b.firebaseapp.com/
![g-c-h-complete](https://user-images.githubusercontent.com/66249668/92307669-05a41a00-efd3-11ea-8b8b-e37da14ab5dc.png)
Googleの検索結果と同じものが得られます。
Google-API（無料プラン）には、一日の検索数に制限があるので、スパムはやめてくださると幸いです。

#目次
[1.App.jsファイル](#1-App.jsファイル)
[2.Maretial-UI](#2-Maretial-UI)
[3.Home.js](#3-Home.js)
[4.Search.js 検索バー](#4-Search.js 検索バー)
[5.まとめ](#5-まとめ)
[6.最後に](#6-最後に)


#1. App.jsファイル

react-router-domを
```npm install react-router-dom```
でダウンロードしておきましょう。

```App.js
import React from 'react';
import './App.css';
import Home from "./Pages/Home";
import { BrowserRouter as Router,  Switch, Route} from "react-router-dom";


function App() {
  return (
    <div className="app">
        <Router>
            <Switch>
                <Route path="/">
                    <Home />
                </Route>
            </Switch>

        </Router>

    </div>
  );
}

export default App;

```

#2 Maretial-UI

使用するMaterial-UIのインポート

https://material-ui.com/　

``` npm install @material-ui/core```

これだけではiconを使用できないので、
```npm install @material-ui/icons```
アイコンも忘れずにインストールしておきましょう。

ここまですると、ここのMaterial Iconsから使いたいアイコンを検索して使用することができます
https://material-ui.com/components/material-icons/

![material-ui](https://user-images.githubusercontent.com/66249668/92306552-edc89800-efca-11ea-973f-a8d29a8ac177.png)

今回使用するアイコンの1つのAPPsを選択すると、
![material-ui-app](https://user-images.githubusercontent.com/66249668/92306584-2cf6e900-efcb-11ea-9b93-47d2eb92eaf2.png)
以下の画面が出てくるので、
```import AppsIcon from '@material-ui/icons/Apps;'```
をコピーして、Home.jsファイルに貼り付けます。

#3 Home.js

```Home.js
import React from 'react';
import './Home.css';
import { Link } from 'react-router-dom';
import AppsIcon from '@material-ui/icons/Apps';
import {Avatar} from "@material-ui/core";

function Home() {
    return (
      <div className="home">
                <div className="home__header">
                    <div className='home__headerLeft'>
                            <Link to='/about'>About</Link>
                            <Link to='/store'>Store</Link>
    
                    </div>
                    <div className='home__headerRight'>
                            <Link to='/gmail'>Gmail</Link>
                            <Link to='/images'>Images</Link>
                        <AppsIcon />
                        <Avatar />
    
                    </div>
                </div>
            </div>

      )
 }

 export default Home

```


コンポーネントを以下のように、home__header その中身を左側と右側に分けました。

![home__header](https://user-images.githubusercontent.com/66249668/92306747-7562d680-efcc-11ea-954f-69f57e31242a.png)

cssファイル

```Home.css
.home {
    display: flex;
    flex-direction: column;
    height: 100vh;

}
.home__header{
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
    align-items: center;
}

.home__header a{
    margin-right: 20px;
    text-decoration: inherit;
    color: rgba(0,0,0,0.87);
    font-size: 15px;
}
.home__header a:hover{
    text-decoration: underline;
}

.home__headerRight {
    display: flex;
    align-items: center;
    min-width: 13vw;
    justify-content: space-between;

}
.home__headerRight > .MuiSvgIcon-root {
    margin-right: 20px;
}

```



```<a href >``` はページがリフレッシュしてしまいますので、React では、```<Link＞```使ったほうが良いです。

```Home.css
.home__header a{
 text-decoration: inherit;
}
```
Home.jsファイル内で使用している ```<Link to=...> ... </Link>```において、
Linkは aで参照してスタイルできます
```text-decoration: inherit;```は、<Link>でデフォルトで表示されるアンダーラインを表示させない設定です。

```Home.css
.home__header a:hover{
    text-decoration: underline;
}
```

``` hover ```　簡単に説明するとマウスが乗ったのみに起こるイベントです。
この場合、マウスが乗った時、アンダーラインを表示させます。


```Home.css
.home__headerRight > .MuiSvgIcon-root {
    ...
}
```

```.MuiSvgIcon-root ```は、Material-uiのiconをスタイリングできます。

```Home.css
<div className="home">
 <div className="home__header">
           ...
 </div> 
  
　{/*ここに追加します*/}
  <div className='home__body'>
      <img
        src="https://www.google.com/logos/doodles/2020/aya-kodas-116th-birthday-6753651837108515-l.png"
        alt=""
      />
     <Search />
  </div>

</div>
```


css: home__body

```Home.css
.home__body {
    flex: 1;
    display: flex;
    margin-top: 10%;
    flex-direction: column;

}
.home__body > img {
    object-fit: contain;
    height: 200px;
}

```

#4 Search.js 検索バー
ここで、Search.jsコンポーネントを利用し、検索バーを作成していきます。

```Search.js
import React from 'react';
import './Search.css';
import SearchIcon from '@material-ui/icons/Search';
import MicIcon from '@material-ui/icons/Mic';
import {Button} from "@material-ui/core";


function Search() {
    return (
         <form className="search">
            <div className='search__input'>
                <SearchIcon className="search__inputIcon"/>
                <input />
                <MicIcon />
            </div>
             <div className='search__buttons'>
                <Button type="submit" variant="outlined">Google Search</Button>
                <Button variant="outlined">I'm Feeling Lucky</Button>

            </div>
         </form>
      )

 }

 export default Search;
```

Search.cssファイル

```Search.css
.search__input {
    display: flex;
    align-items: center;
    border: 1px solid lightgray;
    height: 30px;
    padding: 10px 20px;
    border-radius: 999px;
    width: 75vw;
    margin: 0 auto;
    margin-top: 40px;
    max-width: 560px;

}

.search__input > input {
    flex: 1;
    padding: 10px 20px;
    font-size: medium;
    border: none;
}
.search__input > input:focus{
    outline-width: 0;
}
.search__inputIcon {
    color: gray;
}
.search__buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
.search__buttons button {
    margin: 5px;
    padding: 7px 15px;
    background-color: #f8f8f8;
    border: 1px solid white;
    text-transform: inherit;
    color: #5f6368;
}
.search__buttons button:hover{
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    background-color: lightgray;
}
```

#まとめ

ここまでやるとホームUIの完成です。

![google-clone-home](https://user-images.githubusercontent.com/66249668/92307526-1b650f80-efd2-11ea-8ad7-280a5b5c6d36.png)

#最後に
ホーム画面が完成してキリが良いので、今回はここで区切らせてもらいます。
第二回は、検索した際に表示される画面と,
javascriptの機能などを実装していきたいと考えています。

第三回は（最終回を予定）、Google-APIとFirebaseを実装させていきます。

お疲れさまでした。