「30DAYSトライアル2nd」はこちらホームJavaScript超シンプルなコードからReactの動きとJSX、Babelの関係を理解しようJavaScript2020年1月17日ツイートシェアB!はてブポケットReactはFacebook社が開発したjavaScripのフレームワークです。WordPressのGutenbergで使われている技術として個人的には馴染みがあります。React今回はReactの「最初の最初」ということで、「なんとなく動かすことができる!」ってところまでを紹介していけたらと思います。おわりReactをとりあえず動かすだけ編CDNを使えば「とりあえず」でReactを動かすことができます。Reactまずは適当にHTMLファイルを作成して、いつものように型を作ってあげてください。Emmetが使える方は!を入力するだけで簡単に展開できます。タイトルタグだけ変えて以下のような感じで用意してみました。content="ie=edge"><title>Reactの練習</title></head><body></body></html>空の要素を作成そしたら、React公式の手順どおりに進めていきます。空の要素を作成してあげます。id="root"></div>ってタグをbody内に追加しました。id="root"></div></body></html>scriptタグの埋め込みそしてReactが用意してくれているCDNのscriptタグを埋め込みます。crossorigin></script></body></html>以下の2つをbody直前に入れてあげてください。crossorigin></script>Reactコンポーネントの作成そして、#rootの空タグに読み込ませるためのReactの記述をscriptタグの中に書いていきます。root);</script>まずは#rootのDOMを取得。Reactで要素を作成するためのcreateElementにて要素を作っています。第三引数:値そして最後に、ReactDOM.renderによって、要素をReactのものに書き換える処理を行っているわけですね。全体像としては以下のとおりです。root);</script></body></html>ここまで書くと、#rootがReactで生成したDOMに変更してくれるようになります。余談:JSXは必ずしも必須ではない!JSXは、ReactのDOM生成の記法を馴染みのある形で書かせてくれるものです。そのためにBabelとか色んな技術が絡んでいて意味が分からなくなります。今回は、JSXという記法は使わずに書いてみました。Reactの難しいところにいろんな知識を一度に学びすぎるってところがあると思っています(自分もこれで苦しんだ...)なので、まずは必要最小限のところから理解して、拡張していくというやり方が学ぶ上では大事です。いうことで、以下を参考にJSXは今は使っていません。使うJSXを触ってみる「JSXは必ずしも必要でない!」という見出しの次は「JSXを触ってみる」の説明はなんとも不親切かもしれませんが、実際のReactでのコーディングは、ほぼJSXで書きます。JSXがどんなものかっていう「触り」だけでも体験しておくと、イメージもつかみやすいかもしれません。JSXで書いてみるJSXは、React的なDOMの指定方法をより直感的に指定できるようにする手法です。World');と記載しました。World</h1>のはずです。JSXは、この書き方でもOKにしようという優しさから生まれたものになります(たぶん)書き方を変えて管理しやすく方法はCSSで言うところのSassに似ていますね。Sassもコンパイルという変換処理を行ってCSSに変換するようにJSXも変換する処理が必要になってきます。その役割を担うのがBabelです。World</h1>が直接書けるので、めちゃくちゃ理解しやすくなりました。このままだと「SyntaxError(構文エラー)」になるので、Babelによってコンパイルしてあげる必要があります。Babelでコンパイル実際にはwebpackに組み込んで自動化させることが多いですが、ここではあえて手動で行ってみます。Babel公式にオンラインのコンパイラを用意してくれているので、ここに先ほどのコードを入力してあげましょう。JavaScriptすると、React.createElementの形に変換されてReactが読めるような形となりました。こんな感じで、JSXでより直感的にHTMLタグを作成できる環境にしておくとより開発が捗るということですね。@haniwa008Reactをはじめる最初の最初の部分について紹介しました。本を何冊がザーッと見てきましたが、正直この基本の部分を知れたことでReactに対する理解がグッと高まりました。DOMを書き換えるというReactの基本的な挙動の理解と、JSXというReact的なHTMLをより直感的に書くための言語、そしてJSXをコンパイルするための仕組みがBabelという、この3つの技術構成の関係だけでも理解しておくといいのかなと思います。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。前の記事WordPressで会員サイトを作成する方法!「WP-Members」プラグインが...はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。