React.js入門

JSXをJavaScriptファイルにコンパイルする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Babelを使って、ReactのJSXのコードを標準のJavaScriptにコンパイルします。
講師:
04:13

字幕

このレッスンでは Babel を使ってReact の JSX のコードを標準の JavaScript にコンパイルします。React の練習用のフォルダがここにありましてコンパイルしたいのはpublic の中のsrc という中に入っているscipt.js です。これが JSX で JavaScript を書いていてReact の処理をしています。これを通常の標準のJavaScript に変換しようという訳です。まず前提として Babel がインストールされている必要があります。package.json でここに書いてあるbabel-cli と babel-preset-reactあとこの babel の設定ですねpresets そして配列の中に react という文字が入っています。この設定がされていることを確認して下さい。そして、npm から実行するコマンドを1つ登録します。scripts ここに登録するんですけれども新たに追加します。カンマ区切りで名前はbuild にしましょう。そしてクオーテションの中にコマンドを打ち込みます。ここでは、babel とそしてどこのフォルダにあるのかというパスを指定します。 いま React の練習用のフォルダのpublic の中のsrc だという風に確認しました。それを別のディレクトリフォルダに持っていこうという場合には-d という風に入れます。そしてどこにフォルダを作るのかということで同じ public の中にlib というフォルダありませんでしたねそれが作られます。作ってそこに変換した JavaScript のファイルが納められます。ではこれで保存しましょう。コマンドラインツールのターミナルを開きました。これでまずディレクトリフォルダを練習用の先程の React、cd で React という風に変更します。変更されました。ここで先程登録したnpm のコマンドを実行します。npm そして run です。名前は build にしましたね。実行しましょう。小さいファイルですからあっという間ですね。練習用のフォルダのpublic の中を見るとlib というフォルダが出来上がってそこに script.js があります。ちょっと開いてみましょう。DreamWeaver で開きます。この render ですね、render をちょっと見てみましょう。そしてもうひとつ変換前の JSX のscript.js も開いてあります。 これもスクロールをしてみます。こちらは JSX ですからタグの形ですね。xml 形式です。それに対して、変換後こちらは通常の JavaScript の標準のシンタックスになっています。ということで無事に標準の JavaScript に変換されたということになります。このレッスンでは Babel を使ってReact の JSX のコードを標準のJavaScript コードにコンパイルしました。その場合にやったことはまず package.json にスクリプトを登録しました。build という名前にしましたけれどもbabel そして変換元のフォルダ-d で変換先のフォルダという命令を記述します。そうしたら、コマンドラインツールでnpm run先程登録したスクリプトの名前build ですね、これを実行するとその指定したフォルダの中のJavaScript ファイルJSX のコードが指定先のフォルダにJavaScript の標準のコードとして変換されるということです。

React.js入門

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

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

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

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

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