javascript 初心者が react に触ってみる。その 3（React に戻った）

前置き

前回は予想以上に長くなってしまったた。「javascript は覚えることが多い」の氷山の一角だと思う。

こんかい

前回いろいろやった結果を HTML に反映してなかった
- browserify/uglify で javascript を一つにしたので、HTML を修正して script タグで読み込むのをやめる
react turorial に戻ってコーディング
- bower markedで読み込でたから「こんなものありませーん」と言われたので bower を削除
- サーバサードから json データを GET/POST 取得するコードは flask を使用
- 終了してみて

HTML の修正

browserify で require の部分を解決して、さらに uglify で圧縮までかけているのだから、 HTML にわざわざ <script src="bower_components/react/react-dom.js"></script> と書かなくて良い、とふとんの中で気づいたので修正。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/javascript"
      src="{{ url_for('static', filename='scripts/js/example.js') }}">
    </script>
  </body>
</html>

非常にすっきり。

marked というライブラリを bower で…やらない

npm で結局インストールしました。bower ってなーに？って結局なるからね。

本当の理由は、失敗したからですね。はっは。最初は browserify で bower で読み込んだものもまとめてやろうとと思い、gulpfile.js に debowerify を追加しました。

gulp.task('transform', function () {
  browserify('./project/static/scripts/jsx/example.jsx',
             {transform: ['babelify', 'debowerify']})
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('example.js'))
    .pipe(buffer())
    .pipe(uglify({ preserveComments: 'license',
                   compress: true}))
    .pipe(gulp.dest('./project/static/scripts/js/'));
});

すると、

Error : could not resolve dependency react-dom : bower returns the module as known but not found (did you forget to run bower install ?) (/path/to/example.jsx) while parsing file: /path/to/example.jsx

というエラーがでて、もーえーわ、となりました。bower でフロントまわりの javascirpt を管理して npm で…というのはめんどくさくなったので、npm だけにします。もちろん debowerify も削除。

json データを取得

javascript 界隈なら、node.js を使うらしいのですが、なんかまだ奇妙に見える *1 ので、とりあえず flask を使います。コードは落ちているので省略

github.com

さらにデータを POST するところまで実施。一部 jquery 使っているところが気になる。

tutorial を一通りやってみて

python 2.0 から 3.0 への以降はなんか小さく見えてきました。

*1:Node.js をサーバの HTTP レスポンスを受け取り値を返すものとして使うというのは、node.jsをひと通り使ってみて | anopara を読んだ影響もあるが、なんか違和感がある。

Elaboration in, Garbage out

Twitt*r ではメモできない何かそれ的なモノ・コトを