React.js 入門

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
このレッスンでは、Reactのチュートリアル用につくられたファイルを使って、データの読み書きができるローカルサーバーを立てます。
講師:
07:11

字幕

このレッスンでは React のチュートリアル用に作られたファイルを使ってデータの読み書きができるローカルサーバーを立ててみたいと思います。今開いているのは React の公式のサイトです。ただそのチュートリアルが最近改められてしまいましてこの練習用のプログラムというのがリンクが消えてしまいました。もっともそのファイルはありますので直接アドレスを打ってみたいと思います。ここに github です。github.comそして reactjsさらに /react-tutorialこれで Github が開きます。そして今見ているのが、そのチュートリアル用のファイルなんですけれどreact-tutorialと書いてありますね。これをダウンロードします。ダウンロードするには[Clone or download]というボタンがありますのでクリックして zip をダウンロードします。[Download ZIP]です。そうするとダウンロードがされましたのでこの zip を解凍しましょう。解凍したのがこちらのフォルダーでreact-tutorial-master となっています。この中で必要なファイルは2つです。 1つは package.jsonこれで練習用の設定をインストールします。それからサーバーを立ち上げてその上で読み書きができるようなプログラムとして server.js があります。この2つを練習用の React というプロジェクトのフォルダーを作ったのですがその中にサンプルとJavaScript のコードが入っていますのでこちらにコピーをします。もう1つ package.json ですね。これをコピーを持っていきます。そしてこれがサーバーを立ち上げてデータを読み書きするためのプログラムなんですがこのプログラムではこの立ち上げたい HTML ファイル、それからこの中にはjs ファイルが入っているんですがこれらは public というフォルダーの中に入っているという前提ですので新たにフォルダーを1つ作ります。そして public としましてこの JavaScript のフォルダーとそれから HTML ドキュメントこれを public の中に入れます。ローカルサーバーを立ち上げるのですが、そのローカルサーバーのルートがこの public の中になります。そしてこの package.json のインストールはnpm、node package managerで行うことになります。 この node package manager はコマンドラインツールと言われるアプリケーションで操作するのですがOS X であればターミナルを使うことになります。Windows の場合にはNodeJS をインストールすると自動的に入ってくるNodeJS コマンドプロンプトなどを使われると良いでしょう。ここではアプリケーションの中から[ユーティリティ]で[ターミナル]こちらを立ち上げます。コマンドラインツールが立ち上がりました。OS X ではターミナルですけど開いているのが、その画面です。コマンドラインツールというのはちょっとそっけない画面なんですが現在開いているのはtrainerこれはユーザーの一番ルートになるのですが、先ほどの React のプロジェクトのディレクトリに切り替えます。まずどんなディレクトリがあるかというのを確認しましょう。ls というコマンドでリストででてくるのですがこの中の Documents の中に先ほどのプロジェクトがあります。切り替えます。change directory の頭文字なんですがcd で Documentsもう1回 ls 見てみましょう。そうすると React ありますね。 ということなので改めてまた cd のReact と。プロジェクトのディレクトリに切り替わりました。React になってますね。この状態でインストールを行います。一応今の中身を確認しますがls で確認するとpackage.json がありますね。それから server.js とpublic、これはフォルダーです。今回インストールに使うのはこの package.json になるのですがこれに従ってインストールを行うということなのですがnpm で行います。node package manager、npmそして install と。少し時間がかかりますけどインストールが行われます。もう終わりましたね。そうしたら先ほどのserver.js を使ってローカルサーバーを立ち上げます。この次に続けてまたコマンドを打つのですがnode のコマンドになります。NodeJS ですね、そのコマンドになりましてあとは先ほどのプログラムのファイル名です。server.jsこれでローカルサーバーが立ち上がります。その時のルートというのはここにでていますけれどhttp://localhost:3000 ということなのでではこれをコピーしましょう。 ブラウザーの Chrome を開きましたので先ほどコピーしたアドレスを貼り付けで。そしてここがルートですね。先ほどの public のフォルダーの中ということになります。インデックスがあればそれで良いんですけどファイル名を sample にしましたのでsample.htmlこれでローカルサーバーでsample.html が開きました。React のフォルダーを見てみるとnode_modules というフォルダーが出来上がりました。これが package.json を元にnpm でインストールされた必要なファイルということになります。このレッスンでは React のチュートリアル用に作られたファイルを使ってデータの読み書きができるローカルサーバーをたてました。その練習用のファイルなんですがGithub の reacts / react-tutorialということでダウンロードするんですが必要なファイルは2つでしたね。package.json とそれから server.jsあと HTML ドキュメントとJavaScript のファイルはpublic というフォルダーの中に入れます。それからコマンドラインツールでnpm を使ってインストールするのですが1つ追加でご説明しておきます。 今ここにプロンプトありますけどこの状態というのはローカルサーバーが繋がった状態です。もし切りたい時はcontrol(Ctrl)キーを押しながらキーボードの C ということで今 trainer というのが出てきました。これでサーバーが切れたということです。それからインストールするときのコマンドなんですがnpm installそのあとサーバーを立ち上げるのは今度は node ですね。node server.js ということでした。

React.js 入門

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

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

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

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

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