Help us understand the problem. What is going on with this article?

【React】create-react-appとbrowserifyでの環境構築違い

More than 1 year has passed since last update.

【React】create-react-appとbrowserifyでの環境構築違い

by masashiiwasaki
1 / 5

環境構築に沢山選択肢がある!!

・reactの環境開発に必要なものは多く一から構築するのは初心者には大変!
・パッケージ管理 => npm、yarnなど...
・使用するライブラリやフレームワーク => react, react-dom, vue.js, angular.j.など...
・JSX/ES6のトランスパイラ => Babel、関連プラグインなど...
・ビルドツール => Browserify、webpackなど...
・フォーマッター・構文チェック => ESLintなど...

環境構築を行うにあたり!

  • create-react-appのコマンド一つでReactのアプリが生成できるようにする(岩崎)
  • でも、Babelbrowserifyで一から作成もしたい(小林)

create-react-app

面倒臭いreactにおける環境構築を一発で行ってくれる!
nodeをインストール → npmをインストール → create-react-app → npm start実行!


68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f33353531342f34363365383764662d313137612d656439302d353230352d3539366131306161623462632e706e67.png


 メリット

・ webpack、browserifyの設定が不要
・ バベルの設定も不要


Babelとbrowserify

Reactを使う時には生のJavaScriptを直接書くのは疲れるので、もっと楽に書けるES2015やJSXを使う
*JSX
JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。
コードの量が少なくなり、とても見やすい

(例)
*ES2015(ES6)
<script type="text/babel">
    ReactDOM.render(
            <h1>開発合宿楽しいよ</h1>,
        document.getElementById('root')
    );
</script>

*ES5
<script>
    ReactDOM.render(
      React.createElement(
          'h1',
          null,
          '開発合宿楽しいよ'
      ),
        document.getElementById('root')
    );
</script>

しかし、問題が...
ES2015やJSXはブラウザで直接動かすことができません。

Babel

ここでBabelが登場
Babelはこれらをブラウザで動く生のJSに変換してくれます。

Browserify

npmにあるライブラリをクライアントサイドで使えるようにできる。
つまり、Browserifyというのはnodeのrequire('aaa')という、依存関係解決機能をブラウザに持ち込める。

gulp(タスクランナー) 処理を自動化

gulpfile.jsの設定
編集したJavaScriptのファイルを保存すると、自動で以下の処理を実行する。
1.ES2015,JSXなファイルをbabelでコンパイル
2.browserifyで一つのファイルまとめる(bundle.js)
3.サーバーの起動

監視対象
index.js
index.html
に加えて、srcディレクトリ配下のjsファイル

これらのファイルが更新されていたら、ビルドしてブラウザをリロードします。

上記の処理はgulpfile.jsで設定しています。

ここからは、Reactについてです。
Reactでは、コンポーネントというものを定義して、それを組み合わせることで画面を作ります。
一つ一つが部品のようになっているので、保守性の高いアプリケーションを作ることができると言われています。


index.htmlを作成します。

<div id="container"></div>

のようにしてReactで生成する仮想DOMを適用する場所を作ります。(コンポーネントを埋め込むイメージです)

コンポーネントを渡す部分はこのようになります。

index.js

ReactDOM.render(
    <App />,
    document.getElementById('container')
 )

Appコンポーネントをid=containerな要素に渡しています。Appコンポーネントを定義しているApp.jsにはさらに、いくつかのコンポーネントが繋がっています。

このことからも、Reactではコンポーネントを組み合わせて、画面を作っていることが分かります。

temona
"てもなく"とは「簡単に、たやすく」という意味を持った古語です。 テモナの社名にはIT技術で世の中を便利にしたいという想いが込められています。
http://temona.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away