ホーム / javascript /

Babel 6で「30分間React入門…」をやるために

2016/01/02

javascript

t f B! P L
記事内に広告が含まれています。
A JavaScript library for building user interfaces | Reactはやっていますね。RIA製品で(ベンダーの対応に)うんざりしている人は、Reactに限らず、いろいろなフレームワークなりライブラリなり見てみるといいですよ。

出遅れた感じがするので、 es6 - 2015年、キャッチアップをさぼっちゃった人の為のReactプロジェクト入門 - Qiita をみて、まずはチュートリアルをやってみた。次のお薦めは 30分間React入門「いいねボタン」作成チュートリアルのようなので、やってみたところ、Babel · The compiler for writing next generation JavaScriptが6になって記事の通りでは動かないので、いくつかメモ。

必要ツール

下記のように追加インストール。 
npm install babel-loader babel-core babel-preset-es2015 babel-preset-stage-0 --save-dev
npm install babel-preset-react --save-dev

webpac.config.js

下記のように変更。

入門 React ―コンポーネントベースのWebフロントエンド開発
posted with カエレバ
Frankie Bagnardi,Jonathan Beebe,Richard Feldman,Tom Hallett,Simon HØjberg,Karl Mikkelsen オライリージャパン 2015-04-03
Amazonで購入
楽天市場で購入
7netで購入
価格.comで購入
楽天で探す
楽天市場
 にほんブログ村 ＩＴ技術ブログへ

人気の投稿

  • 本日のお買い物
    SH906iとペアリングさせる。SH906iを新規機器登録状態にして、BT3030をペアリングモードに すればOK。パスキー0000をSH906iに入力すれば、登録完了。 ワンセグの音声も、ミュージックもOK。って、まだ家の中でしか試していないけど。
  • ThunderbirdとGmailのIMAP4
    Thunderbird 2.0.0.14 Windows版で、 アカウント設定画面のサーバ設定で「ヘッダのみ取得する」をチェックしておくと、 メールメッセージをDrag&DropでIMAP4のメールボックスへ移した際、ヘッダのみ 移ったように見えるようだ。 POP3サー...
  • Spring Bootで日本語パラメータが文字化けする
    日本語が文字化け とても便利な Spring Boot 。改修予算がなくてオワコンのstrutsを使い続けなければならないプロジェクトが続いていたので、ようやくまともな世界に移れた!と思ったら、まさかの文字化け問題 orz デフォルトは化けない Spring Bootの...
  • Apache HttpClientでKeep-Aliveを設定する
    プログラムから外部のWeb APIを呼び出すことはよくあることで、HttpURLConnectionクラスを使ったり、 OkHttp などのライブラリを使ったりするようです。ちょっと古い？ HttpClient を使っているプロジェクトで、HTTPのKeep Aliveを見直す...
  • #sql_mode は悪魔の設定
    なぜそのSQL文がエラーにならないのか? 久しぶりに MySQL を使ったシステムのお仕事。INSERT文でnot null制約の付いたカラムが書かれていないのに、エラーにならずに実行されていて？？？となったが、これ、sql_modeに STRICT_ALL_TABLES も ...
Hiroaki's blog

ブログ アーカイブ

自己紹介

パワハラをなぁなぁで済まそうとする奴がCxOやっている会社を辞めました。ストックオプションは半分しか行使できなかったけど、あんな人たちには関わりたくないですね。

アフィリエイト

  • 当ブログ「Hiroaki's blog」は、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
  • 当ブログでは、第三者配信による広告サービスを利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 (氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、ここをクリックしてください。
  • アクセストレードアフィリエイトプログラムに参加しています。
  • A8.netアフィリエイトプログラムに参加しています。
  • バリューコマースアフィリエイトプログラムに参加しています。
  • もしもアフィリエイトプログラムに参加しています。

プライバシーポリシー

当サイトにアクセスされる場合、IPアドレスなどの情報または閲覧状況に関するデータが機械的に生成され、場合によっては個人情報と関連付けられる可能性があります。プライバシー保護に関する適用法に準じて、これらの通信および閲覧に関するデータを収集、処理、および利用することがあります。
当サイトにアクセスされる場合、非個人情報（ブラウザの種類、OSの種類、ドメイン名、訪問数、平均滞在時間、ページ・ビューなど個人を特定できない情報）が自動収集される場合があります。当サイトのパフォーマンスやコンテンツを改善する目的で、これらの情報を利用する場合があります。
アフィリエイトでは成果を把握するためにcookie等を利用しています。それ以外の目的で使用されることはありません。詳しくは各社のページにて確認してください。
本サイトに掲載する情報に関しては、正しいものを提供することを務めていますが、掲載内容から、いかなる損失や損害などの被害が発生しても、当ブログでは責任を追いかねます。

改正電気通信事業法に関する表記

・掲載内容

当サイトでは成果報酬型広告/クリック型広告の効果測定のため、利用者の方のアクセス情報を外部事業者に送信しております。
当該の情報は個人を特定する情報ではございません。また当該の情報が目的外利用される事は一切御座いません。

１．送信される情報の内容
  • 広告の表示日時
  • 広告のクリック日時
  • 広告の計測に必要なクッキー情報
  • 広告表示時及び広告クリック時のIPアドレス
  • 広告表示時及び広告クリック時に使用されたインターネット端末およびインターネットブラウザの種類
２．送信先となる事業者の氏名又は名称
  • グーグル合同会社
  • 楽天グループ株式会社
  • アマゾンジャパン合同会社
  • ヤフー株式会社
  • 株式会社ファンコミュニケーションズ
  • 株式会社もしも
３．利用目的

成果報酬型広告/クリック型広告の効果測定および不正防止のため

QooQ