【React】create-react-appでホームページを一瞬で作る方法【爆速】

# create-react-appを使って一瞬でホームページをつくる方法

### Reactの環境構築について
Reactの環境構築についてはこちらの記事を参考にしてください。

⇨[React環境構築方法](https://qiita.com/rspmharada7645/items/25c496aee87973bcc7a5)

また、画面遷移を使用するので、react-router-domもインストールしましょう。

```
yarn add react-router-dom
```


画面遷移の流れとしてはこんな感じ



index.js⇨MainController⇨App.js⇨MainPage.js or SubPage.js



なので、実際に追加するのは以下４点。
Button.js
MainController.js
MainPage.js
SubPage.js


ここまでできたら、実際にコードをいじっていきましょう！

まず、src配下にButtonComponentを作成します。


```Button.js

import React from "react";
import "./Button.css";
import { withRouter } from "react-router";

class Button extends React.Component {
  handleToPage = () => {
    this.props.history.push(this.props.content);
  };

  render() {
    return (
      <div
        className="Button"
        onClick={() => {
          this.handleToPage();
        }}
      >
        {this.props.name}
      </div>
    );
  }
}

export default withRouter(Button);

```

後、Buttonをちょっとおしゃれにしちゃいましょう。
このままコピーしちゃって大丈夫です。

```Button.css
.Button {
  margin: 10px auto;
  padding: 10px 10px;
  border: 1px solid gray;
  width: 60%;
  max-width: 500px;
  border-radius: 150px;
  overflow: hidden !important;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background: transparent !important;
}

.Button:hover {
  width: 90%;
  max-width: 800px;
  color: #80ffd3 !important;
  padding: 10px 10px;
  border: 1px solid #80ffd3;
  border-radius: 150px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}


```

次にMainPageとSubPageを作成

```MainPage.js
import React from "react";
import logo from "./logo.svg";
import "./MainPage.css";
import { withRouter } from "react-router";
import Button from "./Button";

class MainPage extends React.Component {
  render() {
    return (
      <div className="MainPage">
        <header className="MainPage-header">
          <img src={logo} className="MainPage-logo" alt="logo" />
          MainPage
          <Button name="return" content="/" />
        </header>
      </div>
    );
  }
}

export default withRouter(MainPage);
```

```SubPage.js
import React from "react";
import logo from "./logo.svg";
import "./SubPage.css";
import { withRouter } from "react-router";
import Button from "./Button";

class SubPage extends React.Component {
  render() {
    return (
      <div className="SubPage">
        <header className="SubPage-header">
          <img src={logo} className="SubPage-logo" alt="logo" />
          SubPage
          <Button name="return" content="/" />
        </header>
      </div>
    );
  }
}

export default withRouter(SubPage);
```

そして、全てを制御するMainController.jsを追加

```MainController.js
import React from "react";
import App from "./App";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import MainPage from "./MainPage";
import SubPage from "./SubPage";

class MainController extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Switch>
            <Route exact path={"/"} component={App} />
            <Route path={"/MainPage"} component={MainPage} />
            <Route path={"/SubPage"} component={SubPage} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default MainController;
```

後はindex.jsのApp.jsとなっている部分をMainControllerに書換えればおk。

```index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import MainController from "./MainController";

ReactDOM.render(<MainController />, document.getElementById("root"));

serviceWorker.unregister();
```

後はいつも通り開始の呪文

```
yarn start
```


こんな感じの画面ができます。

![スクリーンショット 2019-08-31 13.12.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/74074753-e45d-f76c-7bb3-41cd16fa3e32.png)

そして、MainPageはこんな感じ

![スクリーンショット 2019-08-31 13.13.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326114/09365df6-749f-9da9-f8e2-be0105b399e3.png)

以上です！

個人的にブログもしているのでよかったら是非ご覧ください！
[カネなしコネなしの26歳が起業したら](http://scsblog.xyz/)