React.js入門

サーバーをローカルに設定する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Reactのチュートリアルファイルを使って、ローカルサーバーを立てます。
講師:
05:40

字幕

このレッスンでは React のチュートリアルのファイルを使ってローカルサーバーを設定したいと思います。まずこれが React のトップページですけどチュートリアルは Get Started からTutorial そして GitHub のリンクがありますので、こちらに移ります。そしてこのチュートリアルのファイルをダウンロードします。Download ZIP ということでダウンロードができました。ZIP ファイルがダウンロードされましたのでこれを開きます。ZIP ファイルを解凍したのがこの react tutorial master というものです。それから React という中に練習用のファイル、こちらですね。sample.html と src の中にJava Script ファイルが入っています。チュートリアルからサーバーを建てるために必要なファイルというのは2つです。package.jsonそれから server.jsこの2つをコピーして練習用のファイルに持ってきます。それから、このチュートリアルのサーバーの設定なんですけどこの練習用のファイル、これは public というフォルダに入れておく必要があります。 ですから、フォルダを作りましてpublic と。この中に HTML と src、Java Script の入ったファイルを入れておきます。設定には node.js がインストールしてある必要があります。具体的にはその中のnode package manegernpm を使うんですけどこれはコマンドラインツールというツールでコマンドを打ち込みます。OS10 の場合でしたらターミナルを使うと良いでしょう。Windows の場合にはnode.js とともにインストールされるnode.js コマンドプロンプトなどのコマンドラインツールをお使い下さい。OS10 の場合には「ユーティリティ」の中に「ターミナル」がありますのでこれを開きます。現在この trainers というユーザーのフォルダを開いているんですけどその中に何があるかというのは ls というコマンドで確認することができます。そうすると、先程見た通り React とかそれから react-tutorial-master というのがありますね。この React の中に編集用のファイルが入ってるわけですからここに切り替えます。切り替えるにはディレクトリを切り替えるchange directory の頭文字なんですけど、それで、React という風に打ち込みます。 そうすると今 React になりましたよ、と出てきました。この状態でインストールを行います。一応確認しましょう。ls と見てみると、package.json server.js必要なものがありますね。この状態でインストールを行います。インストールにはnode package managernpm を使いますのでまず npm と入れて、ワンスペースです。そして install とそうすると少し時間がかかりますけどインストールが行われます。もうできてしまいましたね。この時に実は package.json が使われています。それに乗っ取ってインストールが行われました。これでもうサーバーをたてる準備が整いました。server.js をコピーしましたよね。こちらは node で立ち上げます。ですから node で server.js とそうすると、今度はここでプロンプトが止まってますね。現在サーバーに接続した状態になっています。そしてここにアクセスすればいいんだよ、とサーバーのルートがここだと書いてありますのでこれをコピーします。さて Chrome に戻りました。React のファイルを Chrome で開くともし外部の js ファイルを使っているとエラーになって表示ができないんですけど今度はローカルサーバーを建てました。 ですから Chrome でも、もちろん Firefox でもファイルを、HTML ドキュメントを開くことができます。さて、ここはルートなんですが、ルートはpublic の中がルートとみなされています。その中に、sample.html を置きましたよね。開いてみると、コメントが2件ページが表示されました。これでローカルサーバーでsample.html というReact で作ったページを開くことができたということです。練習用のフォルダをあらためて見てみるとnode_modules というフォルダができてます。この中に必要なファイルが全部インストールされたということになります。このレッスンでは React で提供されているチュートリアルのファイルを使ってサーバーの設定の仕方についてご説明しました。必要なのは Tutorial の中から2つpackage.json と server.js です。それから練習用のサーバーのルートにしたいものはpublic というフォルダの中に入れて下さい。それからコマンドツールからのコマンドの入力はまずインストールにはnpm install ですね。これで node_modulesなどが入るんですけどこれが終われば、後はサーバーを建てたい時にはnode server.js として下さい。 今、サーバーが接続中です。もういいと、サーバーを切りたいという時にはCtrl キーを押しながらキーボードの C のキーを押します。

React.js入門

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

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

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

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

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