Meteor 1.3 React日本語チュートリアル (step02)

Reactコンポーネントでビューを定義する

ビューライブラリとしてReactを用いるため、必要なNPMパッケージを追加します。

ターミナルを開き、起動中のアプリと同じディレクトリに移動して、下記を実行してください。

1	meteor npm install --save react react-dom

初期コードを置き換える

準備のため、デフォルトのアプリのコードを置き換えましょう。詳細は後で解説します。

まず、HTMLファイルの中身を次のコードで置き換えてください。

次に、client/main.jsを削除して次の3つのファイルを追加してください。ファイル名は各スニペットの右下に書かれています。

これにより3つのものがアプリに追加されました。

AppというReactコンポーネント
TaskというReactコンポーネント
初期化コード(client/main.jsというエントリーポイントのファイル内): Meteor.startupブロックに記述され、ページがロードされたときに実行されるコード。このコードは他のコンポーネントをロードし#render-targetのhtml要素にレンダリングする。

このチュートリアルの後半で、コードを変更する際にこれらのコンポーネントについて解説します。

結果を確認する

ブラウザではアプリが次のように表示しているはずです。

Todo List

This is task 1

This is task 2

This is task 3

もしうまくいかない場合は、各スニペットの右下の”view raw”リンクからファイルを取得して確認してください。

静的コンテンツを定義するHTMLファイル

Meteorはアプリフォルダ内のすべてのHTMLファイルを読み込み、<head>と<body>と<template>の3つのタグを認識します。

<head>タグにあるすべての内容は結合されてHTMLのhead部としてクライアントに送られます。また、<body>タグにあるすべての内容も結合されてHTMLのbody部としてクライアントに送られます。これは通常のHTMLファイルと同じです。

<template>タグにある内容はMeteorのテンプレートとしてコンパイルされ、HTML内で{{> templateName}}として読み込んだり、JavaScript内でTemplate.templateNameとして参照したりできます。このチュートリアルでは、すべてのビューコンポーネントをReactで記述するため、Meteorのテンプレートの仕組みは使いません。

Reactでビューコンポーネントを定義する

Reactでは、ビューコンポーネントはReact.Componentのサブクラスです。React.Componentはimport { Component } from 'react';のようにしてインポートします。コンポーネントには任意のメソッドを定義できますが、renderなど特殊なメソッドもあります。コンポーネントはpropsという属性を使って親コンポーネントからデータを受け取ることができます。このチュートリアルでさらにいくつかのReactの機能を解説しますが、FacebookのReactチュートリアルも参照するとよいでしょう。

JSXでrenderメソッドでマークアップを返す

すべてのReactコンポーネントで最も重要なメソッドはrender()です。Reactはコンポーネントが表示すべきHTMLを取得する際にrender()メソッドを呼び出します。HTMLの中身はJSXと呼ばれるJavaScript拡張で書かれます。JSXはJavaScript内にHTMLを書くようなものです。明らかな違いもいくつかあり、例えばJSXではclass属性の代わりにclassName属性を使います。JSXについて理解すべき重要なことは、これはSpacebarsやAngularのようなテンプレート言語ではないことです。JSXは実際には直接JavaScriptに変換されます。JSXに関するより詳細な情報はReactのドキュメントを参照してください。

JSXはecmascriptというAtmosphereパッケージでサポートされ、これは新しく作ったMeteorアプリにはデフォルトで入っています。

CSSを追加する

次に進む前に、CSSを追加してアプリの見栄えをよくしましょう。

このチュートリアルはHTMLとJavaScriptについてのみ解説するため、下記のCSSをまるごとコピーしてclient/main.cssというファイルに貼り付けましょう。これはこのチュートリアル全体で使うCSSコードです。アプリそのものはCSSがなくても動作しますが、CSSを追加することで見た目がとてもよくなります。

CSSを追加できたら、見た目が変わっているはずです。ブラウザで新しいスタイルが適用されているか確認しましょう。

次のステップへ

step03: コレクションにタスクを格納する

Menu

Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト