のっけから躓く、Reactってなんぞや

Reactで検索すると色々とサイトは出てくるものの、個人的にどうもしっくり来ない。
というか、初心者には全く意味が分からない。いくつかサイトを回遊してReactを勉強する手がかりを探しました。その時のメモです。

行き着いた先で一番理解が進んだやつ！

今からでも遅くない! React事始め（https://www.slideshare.net/ynaruta/react-49148006）

色々サイトを見ましたが、このスライドが一番分かりやすかったです。
このスライドで一気に理解が進みましたので個人的には必読です！

まずは、上記スライドを見てみてください！
おそらくこのスライドだけでも事始めとしては十分ではないでしょうか。

スライド以外では、下記サイトの導入部分の紹介が分かりやすくイメージできましたが、
著者のレベルで見た時に途中から急に難しくなったように感じました。
（決してディスっているワケではございませんので、お気を悪くされませんよう。）

 

  • 出来る限り短く説明するReact.js入門
    2017年4月に更新と書かれているので比較的新しそうということで参考にしました。
    しかしながら、後から記事中のReactバージョンが古いことに気づく。
  • React.jsチートシート
    2017年5月に投稿とある。こちらも結構参考になりました。
    この記事を発見したタイミングでファイル読み込みのURL（CDN）が全く違うことを発見。
  • 本家サイト
    英語ということで最初から除外してましたが、マニュアルは結果的にこちらを参考することにしました。

ここまでで躓いたポイント

お恥ずかしい限りですが、実務ではこれまで古い記法のJavaScriptやjQueryしか利用したことのない著者。
混乱するポイントも多かったです。。

  1. CDNの読み込みファイルや<script type=”text/~~~”>が違う
    投稿日/更新日の違いや参照元・Reactバージョンも違うため、正解が分からない。
  2. npmの存在に惑わされる
    開発環境構築が必要と書かれているが、CDNでもOKと書かれていたりする。
    結局どちらでも良いのかなぁと思いつつ、ターミナルを立ち上げてのnpm作業は正直面倒。
    とりあえず手軽に勉強を始めたい。
  3. ES2015(ES6)と従来のJS記法が混在、React記法も変化するので初心者だと意味不明
    記法次第で、Reactの書き方も変わるため初見で大混乱。
    結局本家サイトと睨めっこする形が一番シンプルでした。
  4. Reactでの関数閉じタグが…
    関数hoge()で定義された内容を表示（利用）する場合、<hoge />と記載する。
    HTMLのようで分かりやすいと言えばそうだが、シンタックスハイライトがないと混在していてよく分からなくなる。

結論、手取り早く試したい場合はCDN。最新はv16.3.1（2018.04.05）

本家サイトからCDNを引っ張ってきました。
下記三点セットが必要らしい

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

上2つはReact v16を使うためのもの。最後は、現行で推奨しているコンパイラのBabelです。

Babelって？

これまでは「JSXTransformer.js」を使ってJSXをコンパイルしていたようですが、JSXが非推奨。
今はBabelを使うようです。
※こちらの「Babelを使おう」や「Babelとは」の記事が分かりやすかったです。

JSX？

こちらの記事によると、Facebookの独自タグ技術らしい。
以前は、上述ファイルが自動でコンパイルしてくれていたようです。

とりあえず宣言方法

従来のJSXの場合は、<script type=”text/jsx”>
babelでの記述方法は<script type=”text/babel”>

ここまでのReact要約

  1. Reactは、Babelを使ってJSを変換し利用する
  2. 勉強をするだけならCDN３点セット
  3. 最初はシンタックスハイライトが無いと意味不明

エディタを準備して学習に取り掛かろう

普段利用しているSublime Textを使って勉強を始めようとしたものの、サイトで「Atom」が紹介されていたので「Atom」を利用。
個人的にAtomの閉じタグの処理が苦手でSublime textで書いてましたが。。

React本家サイトにサンプルHTMLへのリンクがありましたので、こちらを使うと便利です。
Minimal HTML Templateの文中に「download this HTML file」というリンクがありますので、保存をしましょう。

ブラウザで開くと「Hello, world!」が表示されたら環境構築は完了です！

Atomプラグインを入れてハイライト他

「環境設定→インストール」から「React」を検索！下記をインストール。

エラーによりインストール失敗..。
同じエラーが出てしまった人がいたら参考になるかなぁ。

Xcodeが必要だった

こういう細かい所が以外と困る個所ですよねぇ。。
エラー内容「Agreeing to the Xcode/iOD licence requires admin privileges, please run “sudo xcode~~~~」

そもそも僕の環境にXcode入ってません。ということでXcodeを入れます。

サンプルHTMLを開く

ここまで準備できたら先ほどのサンプルHTMLを開きます。

やはりハイライトされるだけで見やすいですね。プラグイン万歳！

Similar Posts