React.js入門

Reactのコードを動かしてみる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
予備知識なしに、Reactの最小限のサンプルコードをまずは動かしてみます。
講師:
05:04

字幕

このレッスンでは、予備知識なしに React の最小限のサンプルコードをまずは動かしてみます。今開いているのが React の公式のサイトです。アドレスを見てみるとfacebook.github.io/react とちょっと長いです。もちろんこの通り打っていただければ結構なんですが、Google で react と検索していただければほとんどトップの方に出て来ると思いますのでこれで開くこともできます。そして React のライブラリをダウンロードすることもできますが今回はダウンロードも省きます。そして Get Started、さあ始めましょうということでこのページを開きます。そしてこの Getting Started のサイトではスターターキットというのがありましてこれを使って試してみましょうということなんですが、こちらも今回は省いてしまいます。そしてスクロールをしてこれがサンプルコードなんですがこれをエディターの方にコピーしてしまいましょう。エディターとしては Adobe Dreamweaver CC を開きました。ここで新規のファイルを作ります。HTML です。そして先程の doctype からすべて書いてありましたのでもう完全に上書きしてしまいます。 ペーストです。そして保存しましょう。保存するファイル名はsample にしておきましょう。sample ということで保存します。さあ動かしたいところなんですが、スターターキットをダウンロードするという前提になっているのでライブラリですね、React のライブラリファイルがローカルに合うという前提になっています。けれどもこれはネットワークからライブラリを読み込むということができますのでそちらを使いましょう。React のサイトに戻りました。そして Download React と。ローカルにダウンロードはしないのですがネットワークで開くための CDN と言いますがコンテンツデリバリーネットワークですね、その script 要素の記述が載っています。そして development というのと production というのがありますがdevelopment の方は内容は同じですがライブラリを開いて中のコードを実際に確かめることができます。production こちらは開いてみてもさっぱり分からない状態になっているんですがファイルのサイズを縮めてあります。ですから特に中を開いてみたいということがない場合にはこちらですね、この2行2つライブラリが必要ですのでこれをまたコピーします。 Dreamweaver に戻りましてこの2行が先程コピーしたライブラリと同じものなんですがローカルになくても先程のコピーしておいた2行をペーストしますとこれはネットワークから読み込んでいきます。インデントをかけておきましょうか。さてこれで準備が整いました。コードの方はちょっとよく分からないかもしれません。けれどもここはちょっと変ですが見慣れた書き方ですね。h1 に Hello, world! h1 閉じということになっています。これが JavaScript コードなんですが実際にこの HTML ドキュメントの中に要素として書き込まれます。これが React の機能です。ではファイルを保存して、Dreamweaver の場合にはブラウザーでプレビューということでブラウザーで開くことができます。Google Chrome で開きましょう。Hello, world! と確かに出て来ました。さて「表示」で「開発/管理」「デベロッパーツール」ということでエレメンツを見てみるとここですね div の中に確かにh1 で Hello, world! というテキストが入りました。つまりこの要素が React で差し込まれたということになります。 Dreamweaver に戻ってもう一度確かめてみると、これは script 要素ですね、ですから JavaScript コードの記述です。実際に body の中に要素としてdiv が含まれていまして、そこに div "example" という id があります。その example という id に対してこの h1 要素が差し込まれたと。これが実はどこに差し込むかということを決めているんですけれどもそこに h1 要素が差し込まれて先程ご覧いただいたようにこの div の中に h1 要素が React で差し込まれたということになります。このレッスンでは、細かい予備知識なしにReact の最小限のサンプルコードをコピー&ペーストで動かしてみることにしてみました。

React.js入門

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

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

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

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

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