Javascript React プログラミング

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

 

みやちゃ

 

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

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

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

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

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

今回は
  • create-react-app
この記事を読むと

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について解説していきました!

 

みやちゃ

 

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

こちら のUdemyの動画教材は、8時間で、

  • Dockerで仮想環境構築
  • Railsの基礎を解説しながら、アプリケーション開発
  • RSpecでテストを記述

まで解説しています。

Udemyの教材へ

Railsエンジニアとして働くために必要な、DockerとRSpecを同時に解説してくれています。

DockerとRSpecを使って作ったポートフォリオはかなり評価が高くなります。

ぜひ動画を見てみてはいかがでしょうか?

Udemyの教材へ

受講生は、5000人以上!です。

さらに、Udemyは、30日間の返金保証付きなので、いつでも返金できます。

たったの8時間でDocker、Rails、Rspecを学ぶ即戦力Railsエンジニア養成講座

© 2021 みやちゃのブログ Powered by AFFINGER5