React使ってSPAを作るよ目次
現在進行中なのでときどき記事が増えていきます。
2016/07/29追記
TypeScriptも導入したりCreateReactAppを試したりいろいろ脱線していますが、肝心の元プロジェクトはまだ終わってません…
- React使ってSPAを作るよ（1）
Reactを使うための環境構築と、モックのHTMLを作るところまで。 - React使ってSPAを作るよ（2）
JSXの枠組みを作って、画面を表示するところまで。 - React使ってSPAを作るよ（3）
モックのパーツをすべてコンポーネント化。さらに、JSONデータからリストを連続で描画するところまで。 - React使ってSPAを作るよ（4）
ネストしたJSONデータを渡して、リストの子要素にリストを描画するところまで。 - React使ってSPAを作るよ（5）
残りのコンポーネントの作成と、脱線して「横並びリストが崩れて困る」現象についての説明と愚痴。 - React使ってSPAを作るよ（6）
JSONを外部ファイルにして読み込むところまで。ChromeのXHRエラーに注意。 - React使ってSPAを作るよ（7）
JSONファイルの代わりにPHPで外部サイトのOGPデータを取得して表示。 - React使ってSPAを作るよ（8）
$.ajaxの古臭い書き方を修正する！ - React使ってSPAを作るよ（9）
JSXファイルをヘッダ・フッタ・メインコンテンツに分割してインポート。 - React使ってSPAを作るよ（10）
ヘッダにフォームを追加。JSXファイルをネストして読み込むところまで。 - React使ってSPAを作るよ（11）
ユーザーの入力したタグをリストに反映。jQueryでの実装をReactDOMに置き換える。 - React使ってSPAを作るよ（12）
前回の補足。React v0.13とv0.14の違いについてと、入力フォームの処理解説。 - React使ってSPAを作るよ（13）
URLとタグを$.ajaxでPOST。Reactらしく、自動で記事リストを再レンダリング。 - React使ってSPAを作るよ（14）
細かい調整して、記事登録までは完了。ここまでのデモキャプチャ掲載。 - React使ってSPAを作るよ（15）
共通のコンポーネントでデータの異なるパーツを複数レンダリング。 - React使ってSPAを作るよ（16）
前回の方法を使って、タグをクリックしたら記事を絞り込んで表示するように実装。 - React使ってSPAを作るよ（17）
2秒ごとにAPI叩くなんて嫌だ！URL送信したときかタグクリックしたときだけ$.ajaxする！ - React使ってSPAを作るよ（18）
render内でif文を使って分岐させ、表示するコンポーネントを切り替える。 - React使ってSPAを作るよ（19）
記事に削除ボタンを追加。クリックされた記事のIDを$.ajaxでAPIに渡す。 - React使ってSPAを作るよ（20）
（18）で擬似的にやっていたログイン判定を、Laravelの認証を通したユーザーIDの判定に変更。 - React使ってSPAを作るよ（21）
コメント送信フォームとリスト表示。textareaから送信された複数行コメントにも対応。 - React使ってSPAを作るよ（22）番外編
使用しているReactのバージョンを15.0.0にアップデート。HTMLコードがスッキリ！
- React＋TypeScript＋jQueryの共存（1）
型定義ファイルのインストールと、ReactとTypeScriptの環境設定。 - React＋TypeScript＋jQueryの共存（2）
外部ファイルからモジュールをインポート。jQueryも使用できるようにする。 - React＋TypeScript＋jQueryの共存（3）
クリックイベントが動かない問題を解決。 - React＋TypeScript＋jQueryの共存（4）
ref属性の問題は関係なかった。getInitialStateを書き換え。GitHubに上げました。いったん終わり。
- CreateReactApp編（1）｜React使ってSPAを作るよ
Creat-React-Appコマンドで構築した環境に、既存のプロジェクトを移行する。 - CreateReactApp編（2）｜React使ってSPAを作るよ
JSXファイルをJSに変更して、ES6の書き方に修正していっちょあがり。
記事について
Howto記事のようですが、これはReactとか全然わからないプログラミング素人のWebデザイナーがはじめてReactに触れながら備忘録のために書いている記事です。
ゴールにたどり着けるかどうかもわかりません。
遠回りをしたり、問題点を無視して進めたり、問題点に気づいたけど解決できなかったりすることがあるかもしれません。
もしかしたら同じところでつまずいている人の役に立つかもしれないし、役に立たないと思う人も多いかもしれません。
長い目で見てお付き合いください。
やることになった経緯とか
同僚がGitを使った管理をしつつWebサイトを作る勉強をしようとしていて、業務外でなにかしらやろうという流れになったので、プロジェクトに加わって、半分遊び感覚で社内ツールを作ろうとしています。
うちはWeb系の会社ではないのでWebの仕事ができる人材がほとんどいなくて、Gitを実際に使ったことがあるメンバーも数人しかいないのです。
そこで、若手社員でほかにも興味がありそうな人がいればGitを布教しつつ一緒に開発をしていきたいと考えているところです。
プロジェクトといっても今は彼女（ぺちぱー）と私（デザイナー）のふたり。
彼女は私の「br入れるな」「li改行するな」「勝手にCSS触るな」といった苦言を何度も聞かされてきて、何をしたらまずいかということはなんとなく理解してくれていますが、自身で1からHTML/CSSをキレイに書くことはまだできないので、私の書いたソースを見たいと言います。（これは手を抜けませんね）
と同時に、私の方はサーバサイドの知識が皆無で、プログラムはさっぱり。
去年アプリを作った時にJSONの書き方やajaxでのデータの取得を彼女に教わりました（半分くらいはQiitaのURLを渡されただけでした）
サーバサイドについては彼女に実装をまかせつつ、解説を頼んで覚えていけたらいいな、と考えています。
フロント何使う？Angularやってみる？って聞かれたので即座に反対して「やるならReactやりたい」と自分で言い出してしまい、view側はほとんど私が担当することになってしまいました。
バックエンド側はPHPで書くようだぞ、ということは察しがついているのですが、Laravel使うのかほかの何かに挑戦するのか、まだわかりません。
DBも使うかと思っていましたが、「とりあえずファイル管理やるか」と言っているのでひょっとしたらDBを使わない気かもしれません。
データの管理やバックエンドとのやりとりが絡むところまできたら記事の更新が遅くなるかも。