この記事は、npm非依存でReactを使ったWebフロントエンド開発をしたい方向けです。
GitHub - reactjs/react-router: A complete routing library for React
react-routerがCDNで使用できると聞いてやってみました。
ReactのチュートリアルでもCDNのみを使用した例を使っているのでこれを雛形として、react-routerのCDNを追加します。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Router CDN Sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.5.2/ReactRouter.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="main.js"></script>
</body>
</html>
これでreact-routerが使えます。
CDNを使用した場合は、window.ReactRouterにライブラリが入っています。
let {Router, Route, Link, hashHistory} = window.ReactRouter;
このように変数として宣言しておくと良いです。
簡単なreact-routerの例です。
// main.js
let {Router, Route, Link, browserHistory} = window.ReactRouter;
class Index extends React.Component {
render() {
return (
<div>
<h1>Hello React!</h1>
<ul>
<li><Link to='/about'>About</Link></li>
<li><Link to='/article'>Article</Link></li>
</ul>
{this.props.children}
</div>
);
}
}
class About extends React.Component {
render() {
return (
<div>About</div>
);
}
}
class Article extends React.Component {
render() {
return (
<div>Article</div>
);
}
}
ReactDOM.render((
<Router history={hashHistory}>
<Route path='/' component={Index}>
<Route path='about' component={About}/>
<Route path='article' component={Article}/>
</Route>
</Router>
), document.getElementById('content')
);
index.htmlをブラウザで開くだけでreact-routerが動いているのを確認できます。
個人的にこれはすごく便利で、npmのあれこれを気にしなくて良いのはメリットです。あとはブラウザでimportが動くようになれば、依存関係を気軽にファイル分けできて良さそうな気がします。
historyにhashHistoryを使用していますが、サーバに乗せればbrowserHistoryも使えます。
Flaskと共に実装する場合
こういう場合は、react-routerで作成したルーティングテーブルにリロードでアクセスすると404エラーになってしまいます。
redditやstackoverflowで議論されていて、解決策が提示されています。
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
FlaskでCDNのreact-routerを使用した例です。
サーバサイドをNodejs以外で書くとなると、2つのパッケージマネージャを使うことになり管理が大変になるのでnpm非依存になるように工夫してみました。
Nodejs界隈がビルドツールに強く依存していたりしてモダンなWebフロントエンド開発を始める際のハードルが高くなっているような気がしています、CDNでさっと始めるメリットもあると思いますので気軽にはじめたい方におすすめです。
Show comments