残り火

Reactというのが面白そうにみえたので、とりあえずやってみようと思いましたが、
チュートリアルがあるぞ。ふむふむ．．．

https://reactjs.org/tutorial/tutorial.html

ある程度予想してましたが、やはり英語です。。。
日本語に直して解説してくれているサイトもありますが、
色々組み合わせたり前提知識が必要だったりとしんどい（と私は感じた）ので、
とりあえず頭空っぽでもなんとかなるレベルで手順を記載しようと思います。

書くのは基本的に手順だけです。詳しい解説はしません（できません．．．）
「チュートリアルの解説サイトだけで簡単に解決できるよ」
って人にとってはあまり意味のない内容ですのでスキップ推奨です。


＜前提条件＞
Windows 10

＜手順＞ https://nodejs.org/en/


インストール時の質問は基本的にイエスマンですが、
おそらく下記のチェックは外した方がいいかもしれないです。
「必要なツールを自動でインストールするよ」とあるので推奨だとは思うのですが、
python2とかvisual stadioとかのインストールが一気に始まってちょっと後悔しました。
 

２．新しいプロジェクトを作成

　２－１．Node のプロンプト画面を表示
　　　　手順１を実行すると、「すべてのプログラム」に「Node.js」というのが追加されます。
　　　　その中から「Node.js command pronpt」を選択してプロンプトの画面を表示させます。

　２－２．インストールされたNode.js のバージョン確認（飛ばしてもOK）
　　　　プロンプト画面が表示されたら、下記コマンドを打って、
　　　　インストールされているNode.jsのバージョンを確認します

　　　　npm -v

　２－３．プロジェクトを作成
　　　　プロジェクト作成は下記コマンドを実行します

　　　　create-react-app samrct
　　　　※samrctはプロジェクト名なので、任意に書き換えてください

↓うまくいくと下記のような感じになります


↓うまくいくと、こんな感じのフォルダが作成されます


ソースコードはsrc配下にあるものを使います。
「index.js」「index.css」は必須ですが、
（よく分からない場合）それ以外のものは削除でよいです。

実装は「index.js」「index.css」を使うので、この二つだけ残してもいいですね
※ファイル名は変えないこと！

３．jsファイルとcssファイルにコードを入力

　（という名の、チュートリアルにあるコードのコピペ）
　３－１．index.jsファイルを作成し、下記コードをコピペ
　　　https://codepen.io/gaearon/pen/oWWQNa?editors=0010

　３－２．index.cssファイルを作成し、下記コードをコピペ
　　　https://codepen.io/gaearon/pen/oWWQNa?editors=0100
　　　
　３－３．編集した「index.js」の1行目に下記コードを追加
　　　import React from 'react';
}

↓実行結果はこんな感じ

ちなみに、実行は毎回「npm start」をしなくてもOK。
実行後、コードを変更すればよしなに内容が更新されます。

５．コーディング - TODO

※編集追記を予定しています