React始めました。(環境構築編)

はじめに

おはようございます。こんにちは。こんばんは。
ワタタクです。
今回から数回にかけてReact.jsを勉強していこうと思います。

※この記事は初学者用かつ自分の勉強用で書いていきます。
※Macを使っての解説です。

ゴール

Reactを使ってアプリケーションを作れるようになる。
最終的にFirebaseを用いてのチャットボット的な物を作成する。

React.jsとは

公式サイト

• SPA(Single-Page Application) を実現する JavaScript フレームワークの一つです。
• Facebook 社によって開発され、Facebook の Web サイトでも利用されています。
• 2020年4月現在の最新バージョンは 16.13.1 です。
• JavaScript の中に直接 HTML/XML を記述する JSX という技術を利用しています。
• JavaScript は ES6 の文法である import やアロー関数を取り入れています。

create-react-appとは

reactの環境開発を簡単に行なってくれるもの

環境構築

何か新しい言語を始めようとするには、最初に環境構築を行うことがほとんどの場合必要ですのでやっちゃいましょう。
自分の場合はReact.jsを触る前にVue.jsを触っているので、nodeやnpmといったものがもうすでに入っていますが、初学者向けに0からやっていきます。
まずはnode.js

あります。（バージョン情報が出ればインストールされています。）
インストールがまだの方はこちらのインストーラーを使うことをお勧めします。

インストールが完了するとnpmも同時に使えるようになります。

npm（Node Package Manager）とは?

• Node.jsのモジュール管理ツールです。
• フロントエンドで使用するJavascriptのパッケージ（例えば、vueといった有名なフレームワーク、gulpなどのビルドシステム等）のインストールとバージョン管理に使います。
• 公式サイト

それでは、いよいよReactアプリを作成します。
以下のコマンドを入力して下さい。

$ npx create-react-app hello

※helloはプロジェクト名です。

実行

$ cd hello
$ npm start

以上。お疲れ様でした。

サーバーアップ

$ npm run build

できたbuildフォルダの中身を本番サーバに置く。

最後に

もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです
次回は基本的な書き方とかやっていきます。

最後まで読んでいただきありがとうございました。
Twitterやってます。良ければチェックして見てください。