React ~基礎編~ 事前準備

react

React学習記録

Reactは、javaScriptのフレームワークです。

Reactを使えば、モダンな開発を行えるようになるので、一緒に勉強していきましょう!

今回は、勉強を始めるための環境づくりの話をしていきます。

React環境構築(CDN)

[Visual Studio Code]をPCにインストールしてください。これは、開発用のエディタです。

私は、Macを使って開発していきますが、Windowsでも使用できます。

続いて、Visual Studio Code を開いたらオレンジ枠のボタンをクリックして、検索ボックスに「liveserver」と打ち込んでください。

Live Server が検索結果として表示されるので、インストールしてください。

次に、開発したコードを格納するフォルダをDesktopに作成してください。

Visual Studio CodeのFileからOpenWorkSpaceを選択し、先ほど作成した「learning_react」を開きましょう。

Visual Studio Codeのオレンジ枠のボタンをクリックすると先ほど指定した「learning_react」のワークスペースが表示されているはずです。

続いて、learning_reactの中にフォルダとファイルを作成します。

Visual Studio Code上でindex.htmlを開き、中身に書きましょう^^

Visual Studio Code上のindex.htmlを右クリックし、「Open with Live Server」をクリックしてください。

Webブラウザ(Chromeなど)をインストールしている環境であれば、自動でブラウザが立ち上がり、index.htmlの中身が表示されます。

index.htmlの中身が変更された時、自動でブラウザをリフレッシュしてくれるので、大変便利です^^

Pythonをインストールしてあれば、以下の方法でもReactの動作確認を行えます。

index.htmlのベースコード

次回から以下の内容のindex.htmlを使って学習を進めていきます。

React環境構築(Node.js)

React環境構築(CDN)は、CDNによる学習環境の構築方法ですが、Node.jsを利用する方法もあります。学習していく中で、Node.jsを利用する場面も出てくるので、こちらもインストールしてください。※Node.jsは、サーバー内で動くjavaScriptです

Node.jsのインストール

Install
Macの場合
Windowsの場合

InstallerからNode.jsをローカル環境にインストールできたら、ターミナル(コマンドライン)から下記のコマンドを実行してみましょう。Node.jsのバージョンが表示されたら成功です。※バージョンは異なると思います

Reactプロジェクトの作成

npxを使って、Reactプロジェクトを作成しましょう。
[公式サイト]

Reactのスタートアップ画面が表示されたら成功です。

その他の設定

「npm install -g create-react-app」の設定をしておくと、npxは不要になります。terminal(コマンドプロンプト)から設定ができます。

プロジェクトの構成

以下は、プロジェクトの構成になります。

React Developer Tools

Chromeに「React Developer Tools」を導入しましょう。

次回

次回は、Reactのコンポーネントについて学びましょう 。

コメントを残す