定番
新着
履歴

React.js Hello world

React.js  Hello world

フェイスブック製のJSライブラリReact.jsのハローワールドをやってみました。

まずはこちらのスターターキットをダウンロード。

そして、「helloworld.html」たるHTMLを作成します。

ソースを見てみると見慣れるスクリプトがあります。

   

これはJSXシンタックスという記述でJS内でタグのように記述できるもののようです。

次にこのスクリプトの部分を

src/helloworld.js

として別ファイルに記述します。

src/helloworld.jsをビルドするツールをインストールします。

Macの場合はターミナルを立ち上げて以下のコマンドを流します。

npm install -g react-tools

npmのコマンドを使う場合は、npm (node.js package manager) が必要になります。

npmのreact-toolsのページはこちら

npm install -g react-toolsを実行時に私の場合エラーが出ました。

エラー内容が「権限がなくていろいろできない」的なものでしたので、以下のような権限変更で対応しました。

sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules
sudo chown -R $USER /usr/local

そして、先ほど作成したディレクトリに移動して以下のコマンドを実行。

jsx -- watch src/ build/

すると src/helloworld.js が  build/helloworld.js に変換されます。

build/helloworld.jsの内容は以下です。

React.render(
React.createElement("h1", null, "Hello, world!"),
document.getElementById('example')
);

このようにプレーンな記述で生成されます。(初めからこう書けばいいと思いますが、ここではこのまま聞き入れたほうが良さそうです。)

そして、HTMLにこのjsを読み込ませるようHTMLの記述し、不要な部分の削除する変更を行います。

完了したら、そのHTMLをブラウザで開いて Hello world 完了です。

--近々次のステップのチュートリアルもトライしましたら、また体験談を書かせていただきます。
2016-02-05 20:31:12
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top