Reactとは
Reactは、ユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。
Reactを使うことで、流行りのSPA（Single Page Application）を簡単かつ高パフォーマンスで実装することができたり、UIのパーツをコンポーネント単位で使い回すことで効率的な開発を実現することができます。
また、React Nativeを使うことでスマホのネイティブアプリを開発することもできます。
本記事では、MacにReactの開発環境を構築する方法についてわかりやすく解説します。
Node.jsとnpmをインストールしておく
Reactの開発環境を構築するために、使っているMacにNode.jsとnpmをインストールしておく必要があります。
Macに標準でインストールされているターミナルアプリを開き、「node -v / npm -v」とコマンドを入力してNode.jsやnpmがインストールされているか確認します。
// Node.jsがインストールされているかを確認する
node -v
// npmがインストールされているかを確認する
npm -vこれまでにJavaScriptを使ったことがある人であれば、すでにインストール済みの場合も多いかもしれません。
インストール済みの場合はそれぞれバージョンが表示されますので、次のステップに進みましょう。
// 下記バージョンは一例です
v18.14.0バージョンではなくエラーが表示される場合には、Node.jsやnpmインストールされていないということですので、Node.jsの公式サイトやターミナルからインストールしましょう。
Node.jsをインストールするとnpmも同時にインストールされているはずですのでコマンド「node -v / npm -v」で確認してみましょう。
MacにReactの開発環境を構築する方法
①作業するディレクトリを作成して移動する
まずはReactの開発を行うための作業ディレクトリを用意します。
既存のディレクトリを使っても問題はありませんが、後でどのディレクトリを使っているか判断しやすいように新しいディレクトリを作成する方が良いでしょう。
ターミナルから「mkdir」コマンドで作成するか、マウスの左クリックから新規フォルダを作成しましょう。作成できたら、ターミナルで「cd」コマンドを使って作業ディレクトリまで移動します。
// 例として、ターミナルを開いてデスクトップに作業ディレクトリ「react-test-dir」を作成します。
cd desktop
mkdir react-test-dir
cd react-test-dir②create-react-appで開発環境を構築する
作成した作業ディレクトリをターミナルで開いたら、以下のコマンドを使ってReactの開発環境を構築します。
// 「npx create-react-app {ディレクトリ名}」 コマンドでReactの開発環境を構築する
npx create-react-app react-test-app
// 作成した作業ディレクトリに直接環境を構築する場合、コマンドのファイル名の部分を「./」とする
npx create-react-app ./コマンドの最初の部分が「npm」ではなく「npx」であることに注意しましょう。「npm」でコマンドを実行してもReactの開発環境を構築することはできません。
環境の構築には少し時間がかかりますので、全てのインストールが完了するまで待ちましょう。
以下のような文章がターミナル上に表示されれば、Reactの開発環境の構築は完了です。
We suggest that you begin by typing:
cd /Users/{yourname}/Desktop/react-test-dir/react-test-app
npm start
Happy hacking!③Reactでの開発を始める
Reactの開発環境の構築は完了しましたが、実際にReactでの開発を始めるためにもう少し必要な作業があります。
create-react-appで環境の構築が完了した時の文章に案内されているとおりに、「cd」コマンドでディレクトリを移動して「npm start」コマンドを実行します。（それぞれコピペでOKです）
「npm start」コマンドを実行すると開発用のローカルサーバーが起動し、ブラウザが起動してWEBページが開きます。
もしWEBページが開かない場合には、localhost:3000/にアクセスしてみましょう。アクセスできない場合にはもう一度ディレクトリの移動と「npm start」コマンドを実行してみてください。
WEBページが開いたら、普段お使いのエディタで開いてReactでの開発を始めましょう。
コメント