【React + Flux + GAS】自サイトを作り変えた話 part1(React Router触った編)
おはおはの民~ぱちおです!
この度ホームページを一気に改変しました!そして、ずっと触る触るといって触ってなかったReactを使って作り替えようと思い、色々学習した記録を備忘録として残しておきます。
正直フロントエンジニアとしてどうなのみたいな技術力ですが、この4年間「恥をかきたくない」みたいな感覚でなんもしてなかったな、と。恥をかいていこう恥って思いました。
作り替えたサイト↓
patiopatimon.com
備忘録的情報
- Reactの基本的なページ表示(part 1 ←ここ)
- Flux(情報取得/表示のみ程度)
- GASを使ったAPI作成
これはpart 1でReact Router触った話
Reactはコンポーネントの出し分けが良い感じできてなんかFacebook製の~みたいなふんわり知識レベルです。ちょっとVueは触ったかもしれないし、触ってないかもしれない程度
まぁあくまで自分用備忘録なので、説明用ブログという感じではないです。
Webpackの設定とかnpm環境作るとかはぐぐってください。
React RouterでHello Worldしたい
Reactでまずただのテキスト表示みたいなことをしたい!わけですので、Hello Worldを出します。(基本的書き方をやってみてるだけで最終的に次節のSFCの章の書き方に変える)
なんか触る前から「Reactではこういう書き方で~」というのがまったくもってどこから入ればいいかわからない感じがあるの強いイメージあるんですけどわかりますか?
あと単ページ表示だとなんか違うなと思ったので実際にルーティングを作る時のものでHello Worldしようと思った。
イメージ的HelloWorld(変数とかそういうのは後回し)
React Routerを使ってルーティング設定とかをするらしい。
react-routerのpackege.jsonは"^5.1.2"でした
src/js/pages/Layout.js
import React from 'react'; export default class Layout extends React.Component { render() { return ( <div class="wrapper"> {this.props.children} </div> ); } }
src/js/components/top/TopComponent
import React from "react"; import { Link } from "react-router-dom"; import TestComponent from "src/js/components/top/TestComponent"; export default class TopComponent extends React.Component { render() { return ( <div class="contents"> <h1>ぱちお</h1> <Link to="something">something</Link> { TestComponent } </div> ); } }
src/client.js
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route } from "react-router-dom"; // react-router import Layout from "./src/js/pages/Layout"; import TopComponent "./src/js/components/top/TopComponent"; import SomethingComponent "./src/js/components/top/SomethingComponent"; const app = document.getElementById('app'); ReactDOM.render( <Router> <Layout> <Route exact path="/top" component={TopComponent}></Route> <Route exact path="/something" component={SomethingComponent}></Route> </Layout> </Router>, app);
src/index.html
<html lang="jp"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <div id="app"></div> <script src="./build/client.min.js"></script> </body> </html>
webpackでビルドしてbuild/client.min.js作成する方法とかは別途ぐぐってください
わかったメモ
- ルートとなるclient.jsは基本この書き方でよさそう
- 読み込みたい部品をimportで持ってきて
の形で展開されるっぽい
- Routeタグ属性のexactをつけると完全マッチの時に有効になる(つけないとデフォでどのページでも読み込まれるコンポーネントになる?っぽい)
- 「React内」のaタグでページ遷移するときはLinkを使う
なるほどね、こんな感じで共通となる親レイアウトを作ってそこにさらにimportで追加して~とやっていきページが作られていく感じ。これでじゃんじゃかパーツ作って組み合わせていくだけってのがわかりを得た。Hello World終わり
SFC(Stateless Functional Component)で書きなおす
ここまでよくある感じで実際こんな感じで開発を進めて、デプロイまでしました。そしたらある助言をいただいて(2個目の指摘)
なんと
とどのつまりコンポーネントをReact.Componentの継承でクラスで作っていたけど、最近のReactだと関数で書く方がもろもろclassでコンポーネント作るよりすっきりする(ていうかした)
qiita.com
これあとあとリファクタリングとかしようとすると死んだので、できるなら最初からSFCで書いていくのが吉でした。
例えばさっきのTopComponentを書き換えるなら
src/js/components/top/TopComponent
import React from "react"; import { Link } from "react-router-dom"; import TestComponent from "./TestComponent"; export default class TopComponent extends React.Component { render() { return ( <div class="contents"> <h1>ぱちお</h1> <Link to="something">something</Link> { TestComponent } </div> ); } }
↓
SFCにする
src/js/components/top/TopComponent
import React from "react"; import { Link } from "react-router-dom"; import TestComponent from "./TestComponent"; export default function TopComponent() { return ( <div class="contents"> <h1>ぱちお</h1> <Link to="something">something</Link> { TestComponent } </div> ); }
わぁすっきり
てな感じで静的ページを無限に作る方法がわかったので次に実際に情報とってきて読み込んだり、変数使ったりするやつを時間をみて備忘録まとめていこうとおもいます。