React.js入門

babel-browserを使うときの注意

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ReactのJSXをBabelのJavaScriptライブラリでコンパイルするときには、そのバージョンに注意してください。
講師:
04:14

字幕

このレッスンでは React の JSX を通常の Java Script に変換、コンパイルする babel というライブラリについて注意点も含めて簡単にご説明をします。今開いているのは React のサイトです。その Get Started というページでコピー&ペーストで動くコードが紹介されています。最も React のライブラリはダウンロードしておくという前提になっています。けれども CDNネットワークから読み込むこともできます。ダウンロードのページに移ってスクロールするとdevelopment というのは開発用の Java Script ライブラリなんですけど実際にサイトにアップロードする場合にはこちらの min の方ですね、min の方のコードを読み込む方が速いでしょう。ですから、先程のダウンロードしてあるライブラリ、React のライブラリを読み込む部分を、この2行で置き換えればいいということになります。先程の Get Startedにあったコードをコピーしてそして React のライブラリの読み込みをCDN に差し替えたのがこの HTML ドキュメントです。やっていることはというとこの example という ID を持つ要素この div ですね、そこに対してこの h1 要素を差し込めということです。 但し、この Java Script コードの中にタグを書き込むという JSX はブラウザーが、直接解釈することはできません。それを変換する、コンパイルするのが、こちら babel というツールなんですけれどその browser.js というライブラリになります。このライブラリはここではnpmcdn.com という所からbabel のコア5.8.38 を読み込んでいます。babel の CDN を検索をしますとトップに上がってくるのはnpmcdn ではなくてcdnjs という所です。こちらでも構いません。ちょっと開けてみましょう。そうして見てみるとバージョンが 6.1.19 ですね。先程確認したのは5でした。実は6のバージョンではReact の JSX を正しくコンパイルすることはできません。ですから、例えばこちらで利用する時もバージョン5を選んで下さい。ここで見るとバージョン5は5.8.34 が最新版一番新しいというバージョンになります。そうすると幾つかパターンが出てくるんですが通常はこの browser.min.jsでいいと思います。これをコピーする時URL だけ必要なのかそれともスクリプトタグごとコピーしたいのかと出てきますので今回はスクリプトタグごとコピーするというのを選びましょう。 さて、HTML ドキュメントの方にはすでにbrowser.js はあるんですけれど一応確認のため、今コピーしたスクリプト要素をペーストしてみます。そうすると、サイトが違いますけれど特に問題ありません。あとこちらは 5.8.38 になっていますが今コピーしたのは先程見た通り 5.8.34 です。こちらでも問題ありません。一応確認してみましょうか。では、元々あったものは消してしまいます。その上で保存をして「ブラウザーでプレビュー」してみましょう。そうすると h1 要素でHello, world! が入ったということです。このレッスンでは React の JSX をコンパイルするライブラリ babel の CDN とその使用するバージョンについてご説明をしました。

React.js入門

React.jsはFacebookが開発したJavaScriptライブラリです。このコースではReact.jsで定めた要素をHTMLドキュメントに差し込むことから始まり、JSONファイルから複数のデータを読み込んでリストを作ったり、サーバーとデータをやり取りするなど段階を踏みながらひとつのWebアプリを作りあげます。

2時間21分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年09月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。