GatsbyJSを使ってブログを構築したはいいけど、ReactとかJSXとかよくわかっていないので、スタートガイドを読んで実際にチュートリアルをやってみようかなということで、ローカルに環境を作ってやってみました。
基本はHTMLと簡単なJavaScriptがわかれば進められます。
アロー関数とか出てくるけど、すごく丁寧なチュートリアルなので写経しながら読み進めれば、ReactのJSXやstateの基本がわかると思います。
やってみる
まずはバージョン確認
$ node -v
v11.10.0
$ npm -v
6.9.0以下、チュートリアルを見て進めました。
$ npx create-react-app my-app
$ rm -f my-app/src/*
$ touch my-app/src/index.css my-app/src/index.js
$ npm startこれで、ローカルサーバが立ち上がるのでアクセスすると
上の画面が立ち上がります。
開発中アプリケーション検証やデバッグをしたい場合は、ReactのDeveloperToolsがあるので導入しましょう。
お使いのブラウザにインストールして検証ツールを立ち上げると一番上のタブにReactのタブが追加されています。
すでに検証ツールを開いている場合は検証ツールを開き直すと出てきますよ。
あとはチュートリアルを進めていくだけですが、私は理解が遅いのでチュートリアルを触るときはざっと1回目は読んでから、2回目は写経しながらチュートリアルを進めます。
直近でVueを触ってるので書き方や状態管理はすんなり入ってきました。
JSXのclassNameなどのプロパティは癖でclassとか書きそうですが、あとはカスタムコンポーネントがタグ名になってたりするくらいなので、今のところは難しくないですね。
途中、「タイムトラベル機能(手順番号)」を実装する際のリファクタリングで見落としがあってエラー吐かれたりはしましたけど、エラー内容を追っていけば難しくはないです。
最終的に困ったら、Codepenで説明段階毎のコードを見せてくれるのでとても親切ですね。
感想
3目並べ完成
ゆっくりやっても1時間くらいで終わる内容なので、ぜひReactを初めてみたい方はチュートリアルをやって動くものを作ってみるといいのではないでしょうか。
このチュートリアルでコンポーネントやprops、state等アプリケーションを触ってブラウザに表示するために必要な要素を知ることができるので良かったです。
因みにチュートリアルが終わったらドキュメントの続きがあるので、読んでおくと理解が深まりそうです。ドキュメントも親切で読みやすいですよ！
あとは、Reactといったら強力なライブラリが沢山あるので、Githubで漁ったりネットで調べるとできることが沢山できるので、是非調べてみましょう。
また、チュートリアルのまとめでスキルアップするためのアイデアもリストアップしてくれています。
- 履歴内のそれぞれの着手の位置を (col, row) というフォーマットで表示する。
- 着手履歴のリスト中で現在選択されているアイテムをボールドにする。
- Boardでマス目を並べる部分を、ハードコーディングではなく2つのループを使用するように書き換える。
- 着手履歴のリストを昇順・降順いずれでも並べかえられるよう、トグルボタンを追加する。
- どちらかが勝利した際に、勝利につながった 3 つのマス目をハイライトする。
- どちらも勝利しなかった場合、結果が引き分けになったというメッセージを表示する。
私は復習も兼ねて、後でやってみます。(忘れないうちに)