概要

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

デプロイ先
URL: https://clone-6bd5b.firebaseapp.com/

Googleの検索結果と同じものが得られます。
Google-API（無料プラン）には、一日の検索数に制限があるので、スパムはやめてくださると幸いです。

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のインポート

npm install @material-ui/core

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

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

今回使用するアイコンの1つのAPPsを選択すると、

以下の画面が出てくるので、
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 その中身を左側と右側に分けました。

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;は、でデフォルトで表示されるアンダーラインを表示させない設定です。

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の完成です。

最後に

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

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

お疲れさまでした。

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

概要

目次

1. App.jsファイル

2 Maretial-UI

3 Home.js

4 Search.js 検索バー

まとめ

最後に