Step2: Reactを導入しよう！

このステップではMeteor上でReactを動かす方法を学びます。

Reactの導入

それではMeteorでReactが使えるようにセットアップを行いましょう。

Meteor 1.3のモジュール機能により、npm (Node Package Manager)でインストールしたnodeパッケージをMeteorから直接利用できるようになりました。

また、Meteor 1.3から導入されたコマンド、meteor npm によって、Meteor 内部で使用している npmコマンドが呼び出せるようになったため、npmを別途インストールすることなく使用できるようにもなりました。

Reactはこの meteor npm コマンドを使って導入します。

react 関連パッケージの追加

新しいターミナルウィンドウを開き、Meteorアプリディレクトリ(meteor-react-example)内で、次のコマンド実行してください。

$ meteor npm install --save react react-dom react-addons-pure-render-mixin

上記コマンド実行後、ディレクトリを見ると node_modules というディレクトリ内に react と react-dom, react-addons-pure-render-mixin がそれぞれ追加されているのが確認できます。

$ ls
client/       node_modules/ package.json  server/
$ ls node_modules/
react/     react-dom/     react-addons-pure-render-mixin/

react-meteor-data meteor パッケージの追加

さらにReactでMeteorを便利に使うためのreact-meteor-dataパッケージを追加します。

$ meteor add react-meteor-data

これで MeteorでReactを使う準備が整いました。早速Reactを試してみましょう。

コードの書き換え

Step1で作成したファイルをReact用に書き換えます。

client/main.html

<head>
  <meta charset="utf-8" />
  <title>Simple Memo</title>
</head>

<body>
  <div id="render-root"></div>
</body>

client/main.js

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { render } from 'react-dom';

Meteor.startup(() => {
  render(
    <h1>Hello, Meteor React World!</h1>,
    document.getElementById('render-root')
  );
});

<h1>Hello, Meteor React World!</h1> の部分はReactのJSXとよばれる記法になります。

JSファイルの中に突然HTMLタグが現れたような形になるため、初めは違和感があるかもしれません。が、JSXをたくさん書くことで慣れると思います。

ポイント

  • React ファイルの拡張子は .js または .jsx を使用する
  • Meteor 1.3 から .js 拡張子でもJSX記法を書けるようになった
  • このチュートリアルでは .js を使用する

コードを書き換えて保存し、Webブラウザで http://localhost:3000/ を確認します。

ブラウザに Hello, Meteor React World! と表示されていれば React のセットアップ完了です！

次のステップに進みましょう。

次へ