Reactでポートフォリオサイトを作ってみた大学生の話

##動機
[大学生がvueでポートフォリオサイトを作ってみたという記事](https://qiita.com/plus_kyoto/items/a01578b782f17f573510)を読み、
インターン先でReactを使っていたこともあり、自分もポートフォリオ作ってみました。
## 完成品
こちらが完成した[ポートフォリオサイト](https://y-k-portfolio.herokuapp.com)です。情報量これからもうちょい増やしたいですね。

##デザイン
デザインは adobeXD でまずざっくりイメージを作ってからの実装にしてみました。
(tofubeatsの「what you got」のMVぽく枠線を入れてみました...笑)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340121/03746f9a-312a-8681-70d8-cc13b82da056.png)


##create-react-app

ここから実装の本題です。
まず npm などは React を使う上で必要なのでインストールされていることを確認してください。

```
$ npm install -g create-react-app
```
こちらのコマンドを用いて create-react-app をインストールしてから、

```
$ create-react-app portfolio
```
これで新しく portofolio というディレクトリが作られ、React アプリに必要なファイルがコピーされます。

```
$ npm start
```
を実行するとサーバーが起動し、`localhost:3000`で開くことができるようになります。


##ルーティング

ルーティングについてはブラウザで動くページを書くには react-router-dom を使いました。

```index.js
import {BrowserRouter, Route} from 'react-router-dom';
```
として BrowserRouter と Route を import して

```index.js
ReactDOM.render(
  <BrowserRouter>
    <ToDo />
    <Route exact path={'/'} component={Home}/>
    <Route path={'/about'}  component={About}/>
    <Route path={'/work'} component={Work}/>
    <Route path={'/contact'} component={Contact}/>
  </BrowserRouter>
  , document.getElementById('root'));
```
このようにして、ルーティングできるようしました。

##アニメーションとインタラクション
アニメーションとインタラクションについては、three.js を React で使えるようにしたパッケージと、react poseというライブラリを使いました。
アニメーションは component に分けて、

```Animation.js
import * as THREE from 'three';
```
として、

```Home.js
import posed from 'react-pose'
```
インタラクションは上のようにインポートして使いました。

### 参考文献
[react pose の参考にした記事] (https://qiita.com/seya/items/096862b488258f719e03)
[three の参考にした記事](http://anoninoni.hateblo.jp/entry/2016/11/01/054906)


##コンポーネント
カードと枠線については component 化しました。
カードは title, image, description を props で渡し、

```Card.js
import React from 'react'
import './Card.css'

class Card extends React.Component {
  render(){
    return(
      <div className="card">
        <img
          className="card__img"
          src={this.props.img}
          alt=""
        />
        <div className="card__content">
          <div className="card__title">
          {this.props.title}
          </div>
          <div className="card__lead">
          {this.props.lead}
          </div>
        </div>
      </div>
    )
  }
}


export default Card;
```
枠線は、display を props で渡すようにしました。


```BorderYellow.js
import React, { Component } from 'react';
import posed from 'react-pose'
import './BorderYellow.css';

const props = {
  visible: { opacity: 1 },
  hidden: { opacity: 0 }
}

const Border = posed.div(props)

class BorderYellow extends Component {
  constructor(props) {
    super(props);
  }

  state = { isUnVisible: false };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ isUnVisible: !this.state.isUnVisible });
    }, 1000);
  }

  render() {
    return (
      <Border className={this.props.display ? "border border-visible" : "border"} pose={this.state.isUnVisible  ? 'hidden' : 'visible'} />
    );
  }
}

export default BorderYellow;
```

##おわり
[こちら](https://github.com/KentaroYamada91011/portfolio)に github のソースコードを共有しておきます。（恥ずかしながら）
portfolio サイト作りに少しでも参考になれば嬉しいです〜