「はじめてのReact」一覧に戻る 前回はアイコンやテキスト情報を表示しましたが、色を直接指定することができませんでした。primaryやerrorなど意味を示す物でしたよね。今回はデフォルトで定義されている色などを変更するテーマ機能を触ってみます。

「はじめてのReact」一覧に戻る Material-UIシリーズ第三回は文字のスタイルをあれこれいじってみたいと思います。 SVGアイコンを表示したり、テキストを様々な形で表示します。

「はじめてのReact」一覧に戻る 前回はMaterial-UIのインストールと基本的な利用方法について取り上げました。今回は画面のレイアウトを行う際に利用するグリッドシステムです。 この手のCSSフレームワークの醍醐味の一つはグリッドが用意されていることです…

「はじめてのReact」一覧に戻る Reactでは通常のWebサイトと同様、自由自在にCSSを記述し反映することができるわけですが、ゼロから書き始めるのは個人的に正直ダルい。そんなときにタグにクラス名を適当に指定すればチャチャッといい感じに表示してくれるCS…

「はじめてのReact」一覧に戻る これまでルーティング関連の記事では以下のような内容を取り上げてきました。 第23回 基本的なReactRouterの使い方 第24回 URLの一部をパラメーターとして受け取る 第25回 認証とリダイレクト 今までは以下のように直接を書い…

「はじめてのReact」一覧に戻る 前々回では基本的なReactRouterの使い方を、前回でURLの一部をパラメーターとして受け取ってみました。 今回はユーザーの状態に合わせてページの出し分けを行います。 具体的には 認証済みのユーザーにだけページを表示 未認…

「はじめてのReact」一覧に戻る 前回はReact Routerの基本的な機能を利用し簡単な図鑑アプリを作成しました。 今回はリクエストを受けたURLの一部をパラメーターとして受け取ってみます。 例えばブログやTwitterのようなアプリで特定のIDの記事を表示したい…

「はじめてのReact」一覧に戻る React Routerは雑に言うとリクエストされたURLのパスと、ReactのComponentを紐付けてくれる便利なモジュールです。 例えば /foo にアクセスされたら FooComponentを、/barにアクセスされたらBarComponentを実行することができ…

「はじめてのReact」一覧に戻る 3回に渡ってお送りしたToDoアプリ開発も最終回。今回はAjaxを利用しデータをサーバに保存してみます。 Propsのデータ型をチェック src/header.js src/todocreate.js src/todolist.js src/todoitem.js データをサーバ側で管理…

「はじめてのReact」一覧に戻る 前回に引き続き今回もToDoアプリを作っていきます。目標としてはフォームの使い勝手を向上させつつToDoの削除に対応するところまでとなります。 フォームを改良する Submitイベントに対応 Validationを行う テキストボックス…

「はじめてのReact」一覧に戻る 前回準備した環境を使って、早速Webアプリを作ってみたいと思います。こういうときはToDoアプリを作るのが伝統となっていますので、それに習いますｗ なお、本来であればテストコードを書きながら進めるべきだとは思いますが…

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

「はじめてのReact」一覧に戻る 昨今のWebアプリではWebAPI(RESTful API等)をAjaxなどで叩きデータを取得する、もしくはデータを保存するといった行為を日常的に行っているわけですが、今回はAjaxでデータ取得し表示するまでに挑戦してみます。 MonsterView …

「はじめてのReact」一覧に戻る これまで何の前触れもなくチラッと出てきたComponentにCSSを適用する方法について、いよいよ解説したいと思います。まぁブログの構成(順番)を間違えてるだけなんですけどねｗ もっと早く取り上げるべきだったｗ ダイアログ Co…

「はじめてのReact」一覧に戻る これまでは、最終的にrender()する際にはのようにタグで何らかの文字列や要素を囲わない状態でした。今回はそこから一歩進んでHello!のように何らかの要素を挟んでみたいと思います。 ダイアログ Component サンプル 実行結果…

「はじめてのReact」一覧に戻る いよいよReactの真骨頂っぽいところに足を突っ込んでみます。前回はComponentの中にComponentが1つだけ内包されていましたが、これを複数にしてみたいと思います。 西暦・和暦 相互変換Component サンプル 実行結果 解説 状態…

「はじめてのReact」一覧に戻る 今回はユーザーが入力した値を別のComponentにリアルタイムに渡すサンプルを作ってみたいと思います。 カラーチェッカーComponent サンプル 実行結果 解説 内包するComponentに値を渡す 書籍 参考ページ カラーチェッカーComp…

「はじめてのReact」一覧に戻る Reactでフォームを使ってみようシリーズも佳境に差し迫った第4弾。今回はラジオボタンを触ってみます。 時限爆弾の解体ラジオボタンComponent サンプル 実行結果 解説 ラジオボタンの生成方法 書籍 素材 参考ページ 時限爆弾…

「はじめてのReact」一覧に戻る Reactでフォームを使ってみようシリーズも第3弾。今回のテーマはチェックボックスです。 都道府県チェックボックスComponent サンプル 実行結果 解説 デフォルトでチェックしたい チェック状態を確認したい 注意点 Stateは最…

「はじめてのReact」一覧に戻る 前回のテキストボックスに続き、今回はプルダウン(<select>)の操作方法になります。 ほぼ同じやり方で<ul>, などのリストにも適用できます。 メンバーリストComponent サンプル 実行結果 解説 要素を作成する mapメソッドで要素を作成する</ul></select>…

「はじめてのReact」一覧に戻る 10回目ともなるとだいぶReactで何かを作ることにも慣れてきましたねｗ 今回はいよいよフォームと関連した処理を書いてみたいと思います。Reactに限らずですがユーザーの入力とリアルタイムに連動して表示が切り替わるのは作っ…

「はじめてのReact」一覧に戻る Componentの状態をthis.setState()で変化させる度にrender()が自動的に実行され最新の描画がされるのですが、Reactでは単純なHTMLだけではなくComponent自体を別の物に切り替えることができます。 今回はReactの公式ドキュメ…

「はじめてのReact」一覧に戻る イベント処理は、タグ内にonClickなどのイベントハンドラ用の属性を指定することで定義できます。 これだけ聞くと正直気持ち悪いですよねｗ 結論から言うと最終的には問題ない形でレンダリングされます。実際のサンプルコード…

「はじめてのReact」一覧に戻る Props未指定の場合のデフォルト値の設定を行う場合に、便利な機能が用意されています。前回行ったデータ型の定義と同様に、連想配列(ハッシュ)を書いてあげるだけで実現できます。 コンストラクタでやれば良くね？というツッ…

「はじめてのReact」一覧に戻る 大規模なプロジェクトでは必須？ ComponentがどのようなPropsを欲しがっているか、プロジェクトの規模が大きくなればなるほど管理が大変になってきます。そこでReactではPropsのデータ型を定義できる機能を提供しています。 …

「はじめてのReact」一覧に戻る Componentに引数を渡せるProps これまでのサンプルでは以下のように単にタグを書くことでComponentを実行していました。これだけでも十分なパワーを持っているのですが、より汎用的なComponentにすべきPropsと呼ばれる機能を…

「はじめてのReact」一覧に戻る ComponentのLifecycle ReactのComponentは生まれてから死ぬ(破棄される）までの間にたくさんのイベントが用意されており、それらのタイミングで特定のメソッドを実行してくれる機能を自由に使用することができます。 Componen…

「はじめてのReact」一覧に戻る Component内部のデータ管理をどうするか Reactの売りはデータに変更が発生すると、それに連動しrender()メソッドが実行されるところでもあります。勝手にデータが書き換わってくれる、しかも高速に！ ところが前回作成したJus…

「はじめてのReact」一覧に戻る ReactはComponentを作るための仕組み？ Reactを触っていて感じるのは、React自体はコンポーネントを作るための仕組みなんだなということです。 例えば現在時間を表示する機能がほしいと思ったら というオリジナルのタグをReac…

「はじめてのReact」一覧に戻る JavaScript界のモダンな3大フレームワーク「React」「AngularJS」「Vue.js」、いずれも一長一短あるクセのあるソフトウェアで常に宗教戦争にさらされているわけですが、結論から言えばプロジェクトや個人の趣向にあった物を使…