このレッスンでは、Reactで開発するための開発環境を準備して、実際にReactを操作してみましょう。

Node.jsインストール

はじめにJavaScriptの実行環境であるNode.jsをお手持ちのPCにインストールしていきます。以下のリンクからLTS推奨版ダウンロードします。 MacOSやWindowsなどOSによってダウンロードリンクが異なるので、正しいものを選択してください。
Node.jsのダウンロードはこちら
ダウンロードが完了したセットアップ画面が表示されるので、以下の操作に従ってインストールしていきます。

1.セットアップの初期画面が表示されたら、nextを選択します。

2.ライセンス規約に同意するチェックマークを入れ、nextを選択します。

3.デフォルトのまま、nextを選択します。

4.デフォルトのまま、nextを選択します。

5.チェックマークを入れることで、NPM(Node.jsのパッケージを管理するツール)に必要なツールなどをインストールできますが、 不要なツールも入ってしまうため、今回はデフォルトのまま、nextを選択します。

6.Installを選択します。

7.Installが完了したら、Finishを選択します。

8.コマンドラインでnode -vと入力し、インストールしたNode.jsのバージョンが表示されたら完了です。

VSCodeインストール

次にコードを記述していくためのテキストエディタとして、Visual Studio Codeをインストールしていきます。 以下のリンクからVSCodeをダウンロードします。Node.js同様にMacOSやWindowsなどOSによってダウンロードリンクが異なるので、正しいものを選択してください。
VSCodeのダウンロードはこちら
ダウンロードが完了したセットアップ画面が表示されるので、以下の操作に従ってインストールしていきます。

1.セットアップの初期画面が表示されたら、同意するにチェックマークを入れ、 次へを選択します。

2.デフォルトのまま、次へを選択します。 またデスクトップ上にアイコンを作成したい場合は、該当箇所にチェックマークを入れてください。

3.インストールを選択します。

4.インストールの完了画面が表示されたら、完了ボタンを選択します。 VSCodeを起動してみましょう。

VSCodeを使用する上で、便利な拡張機能を取り上げてみました。このレッスンを進める上で必要になる訳ではありませんが、 インストールしておくと、今後の開発が楽になると思います。

左サイドバーメニューの拡張機能を選択します。

VSCodeのメニュー等を日本語化する拡張機能です。

簡易的なサーバーを簡単に起動することができる拡張機能です。

様々な言語の整形をする拡張機能です。

開始タグを編集すると、閉じタグを自動的に変更する拡張機能です。

Reactのショートカットを使えるようにする拡張機能です。

このチャプターではReactで開発するための準備をしました。 次のチャプターではReactのプロジェクトを作成して、画面を表示させてみましょう。

このチャプターでは、実際にReactのプロジェクトを作成して、画面にHello worldを表示させてみましょう。

create-react-appでプロジェクトを作成

1.VSCodeを起動した状態で、画面上のメニューバーから表示をクリックして、ターミナルを選択します。

2.ターミナルが起動しましたら、以下のコマンドを入力してEnterを押します。
　(Windowsの方)npm i -g create-react-app
　(Macの方)sudo npm i -g create-react-app

以下の画像のように脆弱性の警告が表示されますが、create-react-appの本体である react-scriptが依存しているパッケージに脆弱性があるため、無視で構いません。 警告の後にパッケージの変更と追加が行われていれば成功です。

3.次にReactのプロジェクトを作成するために以下のコマンドを入力します。
　create-react-app ｛ 任意のプロジェクト名 ｝

create-react-appを実行すると、以下の画像のようにプロジェクト作成が始まります。(少し時間がかかります。)

プロジェクトの作成が完了すると、以下の画像のようなメッセージが表示されます。 メッセージに従って、プロジェクトを起動させてみましょう。

4.プロジェクトを作成したフォルダに移動するために、以下のコマンドを入力します。
cd ./｛作成したプロジェクト名｝

5.以下のコマンドを入力して、プロジェクトを起動します。
npm start

起動されると、ローカルホストの3000番ポートから接続することができるようになり、 コンパイルが成功したというメッセージが表示されます。

6.ブラウザで http://localhost:3000 と入力すると起動したプロジェクトを見ることができます。

以下の画像のファイル一覧がプロジェクト作成により自動作成された構成です。

フォルダ名: node_modulesの配下には、インストールされたライブラリのコードが纏められています。

自動で作成されたファイルの中にpackage.jsonとpackage-lock.jsonというものがあります。
package.jsonにはReactの設定や、インストールするライブラリ情報が記載されています。

package-lock.jsonにはインストールしたライブラリ情報や依存関係などの情報が記載されています。

それでは実際にコードを書いて、操作してみましょう。

Hello Worldを表示

はじめに自動で作成されたindex.htmlを見てみましょう。
id="root" 指定されたdivタグがあります。これまでHTMLを学んできた内容であれば、 このdivタグの中にh1タグ等でHello worldと記述すれば、ブラウザ上に表示されたかと思います。 Reactでは、別ファイルからこのid: rootを指定して画面を表示されます。

次にindex.jsを見てみましょう。
id: rootを変数に格納して、インポートしたAppをレンダリング(描画)しています。 プロジェクト構造については、Lesson3以降で詳しく説明していくので、 まずはHello worldを表示させてみましょう。

render関数の中身を書き換えてみましょう。
以下の画像のようにh1タグでHello worldを書きます。

ファイルを保存して、ブラウザをリロードしてみます。
Hello worldが表示されました。

Reactの世界へようこそ。
このLessonでは、Reactで開発するための環境について学びました。 次のLessonでは、基本文法について学びながら、プロジェクトの構造についての理解も深めていきましょう。