create-react-app

はじめてのReact #24 「ルーティングに対応する」URLパラメーター編 react-router@v5

前回はReact Routerの基本的な機能を利用し簡単な図鑑アプリを作成しました。

今回はリクエストを受けたURLの一部をパラメーターとして受け取ってみます。
例えばブログやTwitterのようなアプリで特定のIDの記事を表示したい場合/posts/view/123といった形式のURLにアクセスするとします。ここで問題になるのは1000個の記事があった場合、1000個の<Route>を定義する必要が出てくるのかという点ですね。こういった場合に特定のパターンのURLは一部の文字列をパラメーターとして設定することができます。

続きを読む

はじめてのReact #23 「ルーティングに対応する」基本編 react-router@v5

React Routerは雑に言うとリクエストされたURLのパスと、ReactのComponentを紐付けてくれる便利なモジュールです。

例えば /foo にアクセスされたら FooComponentを、/barにアクセスされたらBarComponentを実行することができるようになります。

今回は3月21日に登場したばかりのReact Router v5を触ってみます。本来はv4.4として出す予定だったそうですがReact 16との互換性が大きく改善されたとのことでメジャーバージョンアップの運びとなったとのこと。使い方もv4系とあまり変わらないようですね。

続きを読む

はじめてのReact #19「開発環境を準備する」create-react-app編

ここまでご紹介してきたサンプルは学習やちょっとした検証には使えるのですが、実際に本番環境で動かすのには向いていません。というわけで今回は本番環境で動かすコードを作成するための開発環境を準備してみたいと思います。

Reactの開発環境

Node.jsのインストール

まず最初にNode.jsを入れる必要があるのですが、アップデートに対応しやすくするためバージョン切り替えが手軽に行えるツールをインストールした上でNode.jsの最新版を入れます。

MacやLinuxならnodebrew

Windowsならnodist

今回は以下のバージョンで構築を開始します。npmはNodejs用のパッケージマネージャーで、これを使って様々な便利ライブラリやツールをインストールすることができます。

$ node --version
v11.7.0
$ npm --version
6.5.0

create-react-appのインストール

Reactの開発環境をゼロから作ろうとすると中々に面倒なのですが、コマンド一発で必要な物を一式揃えてくれる便利ツールがfacebookより公式に提供されているので今回はこちらを利用してみます。

では先ほどインストールしたnpmコマンドを利用してこのcreate-react-appを入れます。npmを利用するとコマンド一発で入ります。

$ npm install -g create-react-app

今回は以下のバージョンが入りました。

$ create-react-app --version
2.1.3

続きを読む