create-react-app【React.js入門#5】

　

みやちゃ

　

皆さんこんにちは、みやちゃです！

物理とプログラミングについて解説しています！

こちらの記事で、Railsのアプリケーション開発からRspecのテスト、herokuにデプロイまで解説しています！

今回はReact.js入門の第5弾です！

create-react-appについて解説していきます！

create-react-appとは

create-react-appは、Facebookが提供しているアプリです。

create-react-appを利用することで、Reactの開発環境を構築することができます。

HTMLファイルへのライブラリ読み込み

これまでのReact.js入門では、HTMLファイルのヘッダーにReactを利用するための以下のようなJavascriptのライブラリを読み込んでReactを利用していました。

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>

HTMLファイルにライブラリを読み込んでやる方法としては、こちらの記事（react hello world）で詳しく解説しているので、ぜひ参考にしてください。

React.js入門#1 reactでHello World

React.js入門#2 JSXでStyle属性を指定する方法

React.js入門#3 仮想DOMについて　reactで時計を作る

React.js入門#4 コンポーネントの作成

Reactを手軽に試す程度ならライブラリを組み込む方法が適していると思いますが、複雑なプロジェクトを作成する場合、難点が生じます。

JSXなどをコンパイルするのにかかる時間は、プロジェクトが複雑になると、著しく大きくなってしまいます。

この問題を解決するために、create-react-appを使ってプロジェクトを作成するのが良しとされています。

create-react-app

https://create-react-app.dev/

create-react-app コンパイル

コンパイルするのには時間がかかるため、プリコンパイル環境を用いて、Reactのソースコードをコンパイルしておくことが推奨されています。

このコンパイル環境を構築するために「create-react-app」を使います。

create-react-appを使うことで、手軽にReactの開発環境を構築することができるのです。

次回の記事では、create-react-appを実際に使って、プロジェクトを作成していきます。

ぜひご覧ください！

まとめ

いかがでしたでしょうか？

今回は、create-react-appについて解説していきました！

　

みやちゃ

　

ここまでご覧いただきありがとうございます！