Reactノート1

  • 2
    Like
  • 0
    Comment

参照

https://www.to-r.net/media/react-tutorial05/

トレーニング用gulp.js

(Gulp+Babel+Browserify+browser-sync)

暫定版

参考
http://qiita.com/kjugk/items/e23556bb1ca908dd6f6b

gulpfile.js

'use strict';
var gulp = require('gulp');
var browserSync = require('browser-sync');
var gutil = require('gulp-util');
var browserify = require('browserify');
var watchify = require('watchify');
var bebelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');

var b = browserify({
  entries: ['./js/index.js'],
  transform: ['babelify'],
  cache: {},
  packageCache: {},
  plugin: [watchify]
})
.on('update', bundle)
.on('log', gutil.log)

function bundle(){
  return b.bundle()
    .on('error', gutil.log.bind(gutil, 'Browserify Error')  )
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist'));
}
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./",
            index: "index.html"
        }
    });
});
gulp.task('bs-reload', function () {
    browserSync.reload();
});
gulp.task('js', bundle);

gulp.task('default',['js','browser-sync'],function() {
  gulp.watch('./dist/bundle.js', ['bs-reload']);
});

スクリーンショット 2017-02-22 20.00.08.png

渡された値を使って動的にHTMLを生成する場合

どのDOMがいまどんな値を持っているのか
どのDOMから何のイベントが発火するか
この値が変わったらどのDOMを書き換えないといけないか

  • 変更があったらHTML全体を書き換える

  • 常に最新の状態のDOMをレンダリングする

  • イベントハンドリングをやる

  • 内部でdiff/patchしてくれる

  • テストを書く

[設計]
サーバーにアクセスするのは、データ取得・保存するときだけにする。APIへ。

JSX

  • JS内に直接HTMLが書ける

  • コンパイルするとDOM生成コードに変換する

  • JSX内のコメントアウトは{}内に記述する

  • 空要素は、最後を/で閉める

<img src="foo.jpg" alt="" />
  • HTMLのclass属性は、ClassNameと書く

  • HTMLのfor属性は、htmlForと書く

  • input要素のvalue属性で初期値を設定すると値が変更できなくなるので、defaultValueと書く

  • ラジオボタンやチェックボックスのcheked="cheked"にしてしまうと変更できなくなるので、defaultCheckedと書く

  • styleは、{{この中に書く}}

  • JavaScriptは{この中に書く}

  • {}の中身はJSの式として解釈されるので変数だけでなく関数も使える

  • 一度作成したコンポーネントはJSX内ではHTMLタグのように利用できる

コンポーネント

  • コンポーネントとは、UIパーツのロジックとマークアップが1箇所に定義されたもの
index.js

import React from 'react'
import {render} from 'react-dom'

render(
  <div>
    <h1>title</h1>
    <h2>contents</h2>
  </div>,
  document.getElementById('root')
);

React.createClassのrenderメソッドで作成の場合

  • 作成したコンポーネントはJSX内でHTMLタグのように使える
index.js

import React from 'react'
import {render} from 'react-dom'

var MyComponent = React.createClass({
render: function() {
  return (
    <div>
      <h1>title</h1>
      <h2>contents</h2>
    </div>
  )
}
});

render(
<MyComponent />,
document.getElementById('root')
);

React.Componentを継承してコンポーネントを作成する場合

index.js

  import React from 'react'
  import {render} from 'react-dom'

  class MyComponent extends React.Component {
    render() {
      return (
        <div>
          <h1>title</h1>
          <h2>contents</h2>
        </div>
      )
    }
  };

  render(
    <MyComponent />,
    document.getElementById('root')
  );

function構文でコンポーネントを作成する(Stateless Functions)場合

index.js

  import React from 'react'
  import {render} from 'react-dom'

  function MyComponent() {
    return (
      <div>
        <h1>title</h1>
        <h2>contents</h2>
      </div>
    )
  };
  render(
    <MyComponent />,
    document.getElementById('root')
  );

コンポーネントを組み合わせる場合

index.js

  import React from 'react'
  import {render} from 'react-dom'

function Title() {
  return (
    <h1>title</h1>
  )
}
function Contents() {
  return (
    <h2>contents</h2>
  )
}
function MyComponent() {
  return (
    <div>
      <Title />
      <Contents />
    </div>
  )
};

render(
  <MyComponent />,
  document.getElementById('root')
);

1枚で試す

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>sample</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <!-- babelがscript要素の内容をブラウザが解釈できるように変換を行う -->
    <script type="text/babel">
    ReactDOM.render(
        <h1>title</h1>,
        document.getElementById('app')
    );
    </script>
</body>
</html>
  • ブラウザ上での変換はコスト高。コンパイルした方がよい。