2019.7.18
0から始めるReact.js#1-基礎の基礎からルーティング-
ずっと導入したい、って言ってたReact.jsを導入しようと思います。リアルタイムな処理が必要とされるSNSでは絶対に必要となる知識で、例えばチャットなんかはReactみたいなSPAフレームワークは必須ですしね。あと、こいつが使えるとほぼ構造そのまんまでスマホアプリに転用できそう。
もちろん工数が増えるっていうデメリットもあるわけですけど、使えないのは困るので使えるようになりたい、っていうのは昔から言ってました。
こいつの開発にはnode.jsが必須なんですが、仕組みを調べていくうちに、本番環境がApacheでも問題ない(ビルドしてアップロードする？)みたいなので、とりあえず作ってみましょう〜〜ということで作ります。
ろんぐさんReact.jsは初めてなので、まずはそのお勉強から始めなくてはいけません。
とりあえずnpmでインストールして、動くサンプルコードをコピペする感じです。
必要そうなファイルはインストールされるので、とりあえず現状動いているコードを下に載せますね。
Route::get('/{any}', function(){
return view('welcome');
})->where('any','.*');
ルートに関しては、React側で処理するので全部welcome.blade.phpに吸収してもらっていいみたいです。
認証とかそのへんはどーすんの？って思ったんですけど調べてもよくわかんなかったので()後回しにします。
下にルートを個別定義しても吸ってくれなかったので、Laravelのルーティングを使うにはもうちょっと調査が必要そうです。
require('./bootstrap');
require('./components/TutorApp');
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, HashRouter as Router } from 'react-router-dom';
const TutorApp = () => (
<Router>
<h1>react-routerに入門する。</h1>
<nav>
<ul>
<li><Link to='/'>Index</Link></li>
<li><Link to='/second'>Second</Link></li>
<li><Link to='/third'>Third</Link></li>
</ul>
</nav>
<article>
<Route exact path='/' component={Index} />
<Route path='/second' component={Second} />
<Route path='/third' component={Third} />
</article>
</Router>
)
const Index = () => (
<div>
<h2>Index</h2>
<p>インデックスページ</p>
</div>
)
const Second = () => (
<div>
<h2>Second</h2>
<p>二番目のページです</p>
</div>
)
const Third = () => (
<div>
<h2>Third</h2>
<p>三番目のページです</p>
</div>
)
export default TutorApp
ReactDOM.render(<TutorApp />, document.getElementById('TutorApp'));
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<title>react test</title>
</head>
<body>
<div id="app">
<div class="container">
<h3 class="mt-5">Todo 管理システム</h3>
<!-- ここを置き換えていく -->
<div id="TutorApp"></div>
</div>
</div>
<!-- avaScript -->
<script src="{{ asset('js/app.js')}}"></script>
</body>
</html>
こんな感じですね。React.jsの基礎知識に関してはめんどいのでググって下さいって感じなんですけど(笑)、いまのとこ僕の理解では、TutorAppクラスのrender()を、htmlのTutorAppクラスに埋め込むイメージです。
これを実際に表示するにはターミナルでnpm run watchすればいいです。
Router部分にリンクとか書けばいいのかなーって感じなんですが、これでなんで下の部分だけ差し替わるのかがよくわかりません笑
何が起こってるかを確認するために、このファイルに手を加えます。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, HashRouter as Router } from 'react-router-dom';
const TutorApp = () => (
<Router>
<h1>react-routerに入門する。</h1>
<nav>
<ul>
<li><Link to='/'>Index</Link></li>
<li><Link to='/second'>Second</Link></li>
<li><Link to='/third'>Third</Link></li>
</ul>
</nav>
<article>
<Route exact path='/' component={Index} />
<Route path='/second' component={Second} />
<Route path='/third' component={Third} />
</article>
<div>
<Route path='/third' component={Second} />
</div>
</Router>
)
const Index = () => (
<div>
<h2>Index</h2>
<p>インデックスページ</p>
</div>
)
const Second = () => (
<div>
<h2>Second</h2>
<p>二番目のページです</p>
</div>
)
const Third = () => (
<div>
<h2>Third</h2>
<p>三番目のページです</p>
</div>
)
export default TutorApp
つまり、link toの部分がスイッチとなるリンクの部分で、Route部分に、pathとURLが一致した場合componentを埋め込む、って感じですね。
なので、thirdのリンクを踏むと、下に追加したthirdとパスが一致することで、Secondコンポーネントが読み込まれて表示される、って感じですね。理解理解。
っていうことでスッキリしたので今回はこの辺で切ります。 ちなみにHashRouterを使わないとURLがすっごい短縮されちゃうので注意です。リロードするとURLが変わって404になりますが、HashRouterだとURLが保持されるのでリロードしても同じページを表示してくれるはずです。