React.js入門

Babelをインストールする

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ReactのJSXのコードを変換するために、Babelをインストールします。
講師:
05:02

字幕

このレッスンでは React の JSX のコードをコンパイルする為にBABEL をインストールします。BABEL の browser.js をスクリプト要素で読み込んでおけばいちいち予め変換しなくてもブラウザー上で JSX を通常の JavaScript コードに変換してくれます。ですから、練習する時はこのライブラリは便利なんですけども実際に公開するサイトの場合いちいち個々のユーザーのサーバー上で変換を行うというのは効率が良くありません。ですから予め変換をして、その変換をしたスクリプト JavaScript ファイルをアップロードするというのが公開する場合には良いでしょう。その場合には、予め変換をする BABEL のインストールが必要になります。今開いているのは Babel の中でReact のコンパイルに必要な React preset のページです。ここは検索で react preset babel という風に検索していただければnpm もあるんですが、こちらのBabel の方を見ることにしましょう。そしてインストールはコマンドラインインターフェースの npm で行います。そのやり方がこのページに書いてあるんですけどもここですね。 npm install -- save-devbabel-cli の babel-preset-react長いですけども、これはコピーしてしまいましょう。そしてコマンドラインインターフェースを開きます。OS X ではターミナルになりますけれどもここでチェンジディレクトリReact のファイルがあるディレクトリに変更します。React ということでフォルダーに移りました。ここに先程のインストールのコマンドをペーストします。npm を使ってインストールをしますということですね。そして、babel-cli とbabel-preset-reactこの2つをインストールします。そして、--save-dev これはpackage.json に記録するというオプションです。babal をインストールする前のpackage.json です。細かい中身は分からなくても今は結構です。注目していただきたいのはこのdevDependencies開発の時に使うモジュールということなんですが現在は空になっています。では、コマンドラインインターフェースでこのコマンドを実行します。そうすると、babel-cli とbabel-preset-react という2つがインストールされます。 今、端っこの方でくるくる回っていますけれどももうそろそろインストールが終わるかと思います。終わりました。babel-preset-react の 6.11.1それから babel-cli の 6.14.0 がインストールされたという事になっています。ここは一旦クリアしておきましょう。clear というコマンドを打ち込みます。package.json の内容に変化が見られます。devDependencies今インストールした babel-cli 6.14.0 とbabel-preset-react 6.11.1 がインストールされました。あと もう1つだけ設定を加えてbabel のインストールは済みます。Babel の React preset のページですけども下の方にスクロールします。Usage とありますがこれをコピーします。これを先程の package.json の中に加えることになります。devDependencies の後に改行してペーストですね。ちょっとインデントを揃えましょうか。あまり揃ってませんけどまあ気にしないことにしましょう。カンマ区切りですね。そしてこの前に、クォーテーションを入れてコロンbabel という風に追加します。 これでインストールが終わります。保存しましょう。このレッスンでは React のJSX のコードを変換する為にBabel のインストールをするその方法についてご説明しました。インストールした端末 Babel のReact preset のページにあるようにnpm のインストールこのコマンドを実行します。その上で、package.json の方に追加するのはこちらですね。ダブルクォーテーション babelそしてコロンの後に先程の記述をコピーしてここはカンマ区切りを付けてください。

React.js入門

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

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

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

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

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