React memo

node.jsを使用します。
node_modulesにbabelやreact、react-domなどいろいろダウンロードしないといけません。
いろんな記事にありますが、jQueryのように簡単には使用できません。
jsxを使用しますので、それもダウンロード必須です。

あとは、各種タスクランナーでの設定です。
package.jsonを見てもらえれば、一目瞭然です。
僕は、lessを使用しますので、それのコンパイルとcssの圧縮を設定しています。

```js
var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    uglify = require("gulp-uglify"),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin'),
    browserify = require('browserify'),
    babelify = require('babelify'),
    source = require('vinyl-source-stream');

gulp.task('less', function() {
  return gulp.src('less/*.less')
    .pipe(plumber())
    .pipe(less()).pipe(gulp.dest('css'));
});

// cssファイル圧縮
gulp.task('minify', function() {
    return gulp.src('css/*.css')
        .pipe(plumber())
        .pipe(cssmin()).pipe(gulp.dest('css'));
});
// トランスパイル
gulp.task('browserify', function() {
    browserify('./common/js/jsx/app.jsx', { debug: true  })
        .transform(babelify, { presets: ['es2015', 'react'] })
        .bundle()
        .on("error", function (err) { console.log("Error : " + err.message); })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./common/js/'))
        .on('end',function(){
            gulp.src(["./common/js/bundle.js"])
                .pipe(plumber())
                .pipe(uglify({mangle: false}))
                .pipe(gulp.dest("./common/js/min"))
        })
});

// watch
gulp.task('watch',function(){
    gulp.watch('./common/js/jsx/*.jsx', ['browserify']);
    gulp.watch("less/*.less", ['less']);
    gulp.watch("css/*.css", ['minify']);
});

gulp.task("default",['watch']);

```

```json
{
  "name": "masaru",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "production": "webpack -p",
    "develop": "webpack -d",
    "watch": "webpack -d --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "cssmin": "^0.4.3",
    "gulp": "^3.9.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-less": "^3.3.2",
    "gulp-plumber": "^1.1.0",
    "gulp-uglify": "^3.0.0",
    "less": "^2.7.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "vinyl-source-stream": "^1.1.0",
    "webpack": "^3.0.0",
    "webpack-uglify-js-plugin": "^1.1.9"
  }
}

```

記述に関しては、ECMAScriptを使用しています。
軽く解説します。

ECMAScriptでは、classが使えます。
letは局所変数といいます。varとはすこし違いますが、ここでは詳しく説明しませんが、varよりletないしconstを使用した方が、楽です。

extends === 他のクラスの子としてクラスを作成するために使用します。（クラス継承）
React.Componentは言葉の通りです。

```js
import React from "react";
import ReactDOM from "react-dom";

// コンポーネント
class CommentBox extends React.Component {
  render(){
    return (
      <li className="clearfix">
        <p>{this.props.value}</p>
        <p>{this.props.text}</p>
      </li>
    );
  }
}

class List extends React.Component {
  render(){
    let items = this.props.data.map(function(i) {
        return <CommentBox {...i}/>
    });
    return (
        <ul>{items}</ul>
    );
  }
}

let data = [
    {text: 'オリジナルサウンドトラック配信開始！', value: "2016.06.08"},
    {text: '『龍が如く』特製カレンダー壁紙6月分を配信！', value: "2016.06.01"},
    {text: '『龍が如く』特製カレンダー壁紙5月分を配信！', value: "2016.05.01"}
];

// レンダリング
ReactDOM.render(
  <List data={data}/>,
  document.getElementById('list')
);
```
開発環境のままになっていますが、本番環境に構築できれば、またお知らせいたします。

参考までに