今日の参考コード

初めての React

今までは Vanilla JS (高収入) を使ってきましたが、ついに React を使うときがきました。実際問題は React の方が高収入だと思います。

Vanilla の隣にある青い React のアイコンを押してプロジェクトを新規作成しましょう!React の門を叩く!

Screen Shot 2019-01-15 at 23.46.59

プロジェクトのフォルダ構成

何やら少しフォルダ構成が Vanilla の場合と違いますね。平たく言えば、public というフォルダがあって、そこに index.html があります。それ以外のファイルは今まで通りに src の中にありますね。

Screen Shot 2019-01-15 at 23.49.58

index.js を開く

何やら色々ありますが、以下の画像で解説します。

Screen Shot 2019-01-15 at 23.53.41

ポイントは、App という関数ですね。これが HTML 風なモノを 定義している。実際ここはほとんど HTML と同じように書くことができます。

そして最後の行で ReactDOM.render(<App />, rootElement) を使って rootElement の隙間に、<App /> をぶちこんでいます。

ここでの ReactDOM.render() の役割は前回の target.innerHTML = '<h2 class="red">変更してやったぜ</h2>' とほとんど同じですね。

React には様々な機能がありますが、今回に関しては完全に target.innerHTML と同じ役割しか果たしていません。

つまり、前回と同じく、HTML の要素を、対象の場所にぶち込む、ということをやっているにすぎません。React で。

<App /> ってなんだ。JavaScript なのに HTML 風に書けるのは何故なんだ。こういうことはまた今度やることにします!

宿題

今日はとにかく React のプロジェクトを立ち上げて、触ってみるだけで合格です!

  • React プロジェクトを作る
  • HTML 風の部分を好きな風に書き換えてみる

以上です!