React.js 入門

ReactのコードをJavaScriptファイルに分ける

LinkedInラーニングの無料トライアルを今すぐ試そう

無料で視聴する すべての加入プランを見る
このレッスンでは、HTMLドキュメントに書いたReactのJavaScriptコードを、管理しやすいように外部ファイルに分けます。
講師:
04:13

字幕

このレッスンでは HTML ドキュメントに書いたReact の JavaScript コードを管理しやすいように外部ファイルに分けたいと思います。今開いている HTML ドキュメントにはReact のコードが書いてあります。構造はまず、JavaScript のライブラリが3つ読み込んであります。2つは React のライブラリです。そして3つ目が React の JSX をコンパイルする babel ですね。そして body には div 要素があってReact のコードはscript 要素の中に書いてあるんですけどこれを JavaScript ファイルに別ファイルとして分けようと思います。まず現在の動作なんですけど確認します。[ファイル]>[リアルタイムプレビュー」です。単に「Hello, world!」という文字が出てくるだけです。これは h1 要素としてReact から差し込まれています。この React のコードですね。render というメソッドですけれどまず最初の引数、ここに JSX の h1 のタグが書いてありますが、この要素を作ってgetElementById でroot の ID を持った要素を探しなさい、そしてこの中に差し込むという風になっているわけなんですがこの中のコードを別ファイルにわけますのでカットしてしまいます。 [カット]ですね。そして新規にJavaScript のファイルを作ります。[作成]ということで今カットしたものを[ペースト]です。貼り付けましてちょっとインデントを整えましょう。こんな感じでしょうか。[保存]します。これが今の HTML ドキュメントがあるフォルダーなんですけれど名前は「script」にしましょう。拡張子は .js です。それからサブフォルダーを作りたいと思いますので[新規フォルダ]で src、ソースの意味ですけど作成してその中に、この新たなJavaScript のファイルを保存します。この JavaScript のコード、React のコードは特に変更はしません。では HTML ドキュメントの方に移りましてこの script の要素ですね。閉じタグはくっつけてしまいましょう。そして head 要素に持っていきます。ちょっとインデントが狂ってますかね。気持ち悪いので全部揃えましょう。こんな感じでしょうか。そして babel、これは残さないとbabel でコンパイルしますので加えるのは外部ファイルにしましたから、ソースですね、src ということで[参照...]して今作った src のフォルダーにあるscript.js を開きます。 これで良いでしょう。保存をして確認しましょう。[ファイル]>[保存]して[リアルタイムプレビュー]です。div 要素に h1 要素が差し込まれて「Hello, world!」と表示されました。このレッスンでは HTML ドキュメントのscript 要素に直接書かれていたReact の JavaScript コードを管理しやすいように別ファイル、JavaScript ファイルに分けました。その場合、コードはそのままカットしてJavaScript ファイル、script.js別フォルダーを作ってその中に保存したのですがそれを script 要素で読み込むということでsrc の中にサブフォルダーsrc の script.js、それからこの type の /babel これを忘れてはいけませんね。

React.js 入門

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

2時間24分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
プラン加入者限定
発売日:2016年09月09日

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

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

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