のんびりフロントエンド

フロントエンドエンジニアのブログ。やったことを書いきます〜

今更Reactの環境整えてみる

今更感が強いけど・・・

もちろん、話題になっていた頃から知ってはいたんですがどうもHTMLタグをJSでガッツリ書くのに抵抗があったんですよね。
当時はエディタとかIDEAとか充実してなかったし←と言い聞かせている

Reactとは?

ざっくり言うとJSでHTML記述する感じです。
ここはまた後で書こう。。。

使い方

使う方法は大きく分けて2つあります。
jsxファイルを読み込む方法と、jsxファイルをjsファイルに変換して使う方法です。

jsxファイルを読み込む方法

下記のように記述します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>react sample</title>

        <!-- React.js -->
        <script type="text/script" src="https://fb.me/react-15.0.1.min.js"></script>
        <script type="text/script" src="https://fb.me/react-dom-15.0.1.min.js"></script>

        <!-- jsxをjsにtransformする -->
        <script type="text/script" src="http://fb.me/JSXTransformer-0.12.0.js"></script>
    </head>
    <body>
        <div id="content"></div>
        <!-- reactを使ったjsxファイルを読み込む -->
        <script type="text/jsx" src="~/scripts/jsx/sample.jsx"></script>

        <script type="text/script">
            (function() {
                // 処理
            })();
        </script>
  </body>
</html>
  • react-x.x.x.min.jsreact-dom-x.x.x.min.jsとjsxファイルをjsとして使うためのJSXTransformer-x.x.x.jsを読み込む
  • reactを使用したjsxファイルを読み込む
    • この時、jsxを呼ぶ時のタグにtype="text/jsx"を書くことを忘れないように

jsxファイルをjsファイルに変換して使う方法

下記のように記述します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>react sample</title>

        <!-- React.js -->
        <script type="text/script" src="https://fb.me/react-15.0.1.min.js"></script>
        <script type="text/script" src="https://fb.me/react-dom-15.0.1.min.js"></script>
    </head>
    <body>
        <div id="content"></div>
        <!-- reactを使ったjsファイルを読み込む -->
        <script type="text/script" src="~/scripts/js/sample.js"></script>

        <script type="text/script">
            (function() {
                // 処理
            })();
        </script>
  </body>
</html>
  • 同じようにreact-x.x.x.min.jsreact-dom-x.x.x.min.jsを読み込む
  • こちらの方法ではjsxファイルを読み込まないため、事前にjsファイルに変換する
    • 方法は次の項目で説明します。
  • 変換したjsファイルを読み込む

事前に変換をする

gulpを使ってwatchするのが自分的には一番楽だと思ったのでその方法を載せておきます。
サンプルは以下にあります! github.com

サンプルの使い方

  • 下記のコマンドでnpmインストールを行う
    ※nodeがインストールされてることが前提です。
npm install
  • gulpのタスクを実行する
  • 今回用意したタスクは2つ
    • jsxを生成するタスク(script/jsx配下のフォルダから、script/jsにjsを生成する)
    • jsxのタスクをwatchするタスク(script/jsx配下のファイルに変更があったらjsxタスクを実行する)
gulp jsx

gulp watch

まとめ

とりあえず環境だけ整ったのでまとめます。
使い方は2つありましたが、絶対に後者のほうがいいでしょう。
無駄なファイルを読み込んでいるわけですし、jsxファイルをわざわざ読み込めるようにクライアント側で変換もしているわけですしね。。。
速度とかは検証してません。

変換するときはwatchしておくとかなり楽ですね。
方法としてはgulpに限らず他のタスクランナーでやってもなんでもいいと思いますしね!

ぜひ使ってみてください!!

自己紹介

こんにちは、ぽてちです。
とりあえず自己紹介しときます。

プロフィール

  • 職業 - フロントエンドエンジニア
  • 趣味 - Hulu見る、音楽聞く

Huluは今walking dead見てる!(やっぱりPrison Breakが1番だけどね♪)
音楽はfall out boy, one ok rock, SiM, coldrain, crossfaith, [Champagne] [Alexandros]とかとかですね

何書く??

基本的にエンジニアブログって感じで技術的なこと書いていこうと思います。 でも、趣味とかエンタメ系もたまに書いたりできたらなとかとかも!

自分はJSが好きなのでフロント周りの自分がやったことブツブツ言っていく感じになりそうです。
まぁ、最初はこんなもんですかね。

ネタ探し頑張ります。 ということで、次回よりよろしくお願いします!!