React.jsについて学んだことをまとめてみた

みなさんこんにちは。
ちまたでは、すでにたくさんの情報が出回っていますが
遅ればせんがら最近React.jsを知ってこの記事をまとめています。

近々は私生活がバタバタしていたこともあって
新しい技術を学ぶ姿勢が抜けていました（反省）。

いろんな方が書いている記事を自分なりにまとめるので
どこにでも書いてる内容かと思いますが、お付き合いください。

React.jsとは？

・JavaScriptで書かれたライブラリで、React.jsをインクルードして使用する。
・JavaScriptのコード内に、HTML（React内ではこれをJSXという）を書くことで
　ページを作成できる。
・JSXは、JavaScriptではもちろんエラーになる。そのため、実行前JavaScriptに変換してげる必要がある。
・実行前後どちらでも、変換可能。
　実行前であれば、JSXTransformer.jsを使用する。実行後はjsxコマンドを実施することで対応可能。

React.jsの構成について

基本的にはrenderというメソッドを実装すれば、React.jsを動かすことができます。

//.jsx内の記述

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
    render(){
        return (
      <div className="indexBox">
        <p>ここに文章が入ります。</p>
      </div>
    )
    }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('main') /* Reactが生成したコードを#mainに書き出す */
);

上記通常のHTMLと違うのは「class」部分の書き方です。
React.js ではclassをclassNameと記載します。

実際にこれがHTML側ではどうなるかというと

<!DOCTYPE html>
<html lang="ja"><head>～
</head>
<body>
<div id="main">
<!--Reactで生成したソースがレンダリング-->
</div>
<script src="/js/test.js"></script><!--.jsxをコンパイル-->
</body>
</html>

単純にこんな感じであれば、そんなに学習コストかからなくない？と思いますが
もちろんこんな単純ではありません。React.jsには以下のルールがあります。

①Reactはパーツ設計である。
そう、ReactはComponentといわれる「パーツ」を組み合わせて構築します。
そのためReact自身ではデザイン（CSS）の設計を行うことはありません。

②importはReactを使うために書く決まり文句なので必ず記載。

③extends React.Componentは決まり文句。

④タグ名＝コンポーネントクラス名とすることでコンポーネントを設置できる。

⑤render(){ return( の直下は1つのdomしか置けない。
つまり、こういうことはできない。

class MyComponent extends React.Component {
    render(){
        return (
      <div className="indexBox">
        <p>ここに文章が入ります。</p>
      </div>
　　　<div className="indexBox">
        <p>ここに2つ目の文章が入りますよ。</p>
      </div>
    )
    }
}

とまあ、このほかにももちろん決め事がたくさんあるわけでして…
正直なところ、私のような旧型（？）タイプの開発者にはそもそもここの敷居が異常に高いと感じてます(笑)。

で、ここにきてじゃあReact.jsを使うメリット＆デメリットって何？というのが
頭に浮かびました。

Reactを使うメリット

・jQueryを使用しなで済む（脱jQuery）
・Javascript的な書き方でかっこいい（気がする(笑)）
・動きがサクサク
・再利用しやすい
・React覚えてしまえばアプリも作れる

Reactのデメリット

・あまり日本で普及していない
・WPなどのPHPと併用できない
・これまで使用していたJSライブラリが使用できないときがある
・バージョンアップによってちょっとずつ書き方が変わる…
・使用できる環境をつくるのに手間がかかる
・Ajax処理が得意でない

最後に

基本的にはWordPressなどのCMSを使用する場合にはあまり不向きのようです。
お客様向け案件で実装することは少ないようですが、Facebookが開発したというだけ
あって一度は組んでみたいものですね。

Creator Note

Design & web