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

Reactの環境構築について

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

⇨React環境構築方法

また、画面遷移を使用するので、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

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

そして、MainPageはこんな感じ

以上です！

個人的にブログもしているのでよかったら是非ご覧ください！
カネなしコネなしの26歳が起業したら