Reactで「Hello World」をしよう

JSXとBabelについて

ブラウザのデベロッパーツールで、何らかの文字を表示させたいと思います。

まずは、このコードを書いて下さい。（public/scripts/app.js）

console.log('app');
let template=<p>This is JSX from app</p>;
let appRoot = document.getElementById('app');
ReactDOM.render(template, appRoot);

直感的なコードではありますが、これをブラウザで見ると、エラーが出ています。なぜならば、これはJSXというJavaScriptの拡張コードで書いているのですが、Chromeはその記法を理解してくれないためです。ブラウザが理解できるようにJSXを普通のJavaScriptのコードに変換してやる必要があります。

JSXからJavaScriptへのコードの変換にはBabelを使います。

Try it outをクリックして下さい。

さきほどのコードを貼ると、JSXがJavaScriptに変換されることがわかります。

変換前

<p>This is JSX from app</p>;

変換後

"use strict";
React.createElement(
 "p",
 null,
 "This is JSX from app"
);

変換後のコードをapp.jsに書けば、動くことがわかるはずです。それを常に書いてもいいのですが、それはReact.jsが意図していることではありません。簡単にJavaScript書くためにローカルにBabelをインストールしましょう。

Babelのインストール

sudo npm install -g babel-cli@6.24.1

インストールされていることを確認します。

babel --version

次にpackage.jsonを作成します

yarn init

ファイルの中身は、このようになっています。

cat package.json

{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}

次に、babelのモジュールをインストールします。

yarn add babel-preset-react@6.24.1

yarn add babel-preset-env@1.5.2

node_moduleの中身を見ると、様々なファイルがインストールされていることがわかります。

cd /home/vagrant/indecision-app

mkdir src

touch src/app.js

このファイルを編集して、以下の内容を書いて下さい（src/app.js）

console.log('app');
let template=<p>This is JSX from app</p>;
let appRoot = document.getElementById('app');
ReactDOM.render(template, appRoot);

public/scripts/app.jsは何も書かれていない状態にして下さい。

src/app.jsのみにコードが書かれています。

これが現在のディレクトリ（フォルダ）構成です。

JSXファイルから、JavaScriptコードを自動で生成しましょう。

babel src/app.js --out-file=public/scripts/app.js --presets=env,react

確認してみましょう。

cat public/scripts/app.js 

このコードは自分で書いたものではなく、自動生成されたものです。

'use strict';
console.log('app');
var template = React.createElement(
'p',
null,
'This is JSX from app'
);
var appRoot = document.getElementById('app');
ReactDOM.render(template, appRoot);

src/app.jsにあるJSXから、public/scripts/app.jsにJavaScriptのコードが自動で書かれてました。

次に一旦、ctrl + cを押して、watchオプションをつけて起動させましょう。

babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch

この状態で、src/app.jsを変更してみて下さい。自動で、ブラウザの方も変更されることがわかるはずです。