Reactとは
Reactとは、ユーザーインターフェース構築のためのJavaScriptライブラリです。ReactはJavaScroptのフレームワークとして、可読性が高く、非常に簡単にコードを書くことができると言われています。
MacでReactを使えるよう、一緒に環境構築していきましょう！
ReactをMacに導入
エディターはVScodeを利用します。
ReactをMacで使用するには、Node.jsが必要です。
Node.jsをインストールするために、Homebrewとnodebrewをインストールします。
Homebrewをインストールするには、過去記事を参照してください。
nodebrewは、Node.jsのパッケージ管理ツールです。nodebrewをインストールします。次のように、ターミナルで入力します。
brew install nodebrewこれで、nodebrewのインストールが可能です。
次に、nodebrewを使って、Node.jsをインストールします。
ターミナルで、次のように入力します。
nodebrew install-binary stableこれで、Node.jsの最新安定バージョンがインストールされます。
ここで、次のコマンドを入力します。
nodebrew lsこれで、インストールされているNode.jsのバージョン一覧が表示されます。
ここで、バージョンの一番新しいものを見つけます。これで、インストールされているNode.jsのバージョン一覧が表示されます。
例えば、上記のように表示されたとします。一番最近インストールしたバージョンは、v18.2.0は、currentにはなっていません。インストールしたバージョンを使えるようにするには、次のようにコマンドを入力します。
nodebrew use 使いたいバージョン（ここではv18.2.0)
実行結果で、current: v18.2.0となり、目的のバージョンがカレントとなっていることを確認できます。
これで、インストールは完了です。
Reactプロジェクトの作成
create-react-appは、React を学習するのに快適な環境であり、React で新しいシングルページアプリケーションを作成するのに最も良い方法です。開発環境をセットアップして最新の JavaScript の機能を使えるようにし、快適な開発体験を提供し、そして本番環境用の最適化を行います。あなたのマシンに Node >= 14.0.0 及び npm >= 5.6 の環境が必要です。
プロジェクトを作成するには次を実行します：
npx create-react-app プロジェクト名このコマンドを実行すると、カレントディレクトリにプロジェクト名で指定したフォルダが作成され、必要なファイル・フォルダがセットアップされます。例えば、次のように入力します。
npx create-react-app my-project少し、時間がかかりますが、必要なフォルダ、ファイルが作成されます。
それでは、作成されたプロジェクトのフォルダ、ファイル構成を見てみましょう。
my-projectフォルダに移動します。
cd m-project次のコマンドを入力して、一覧を取得します。
ls -al
開発者が主に追加、編集するのは、srcフォルダです。それではsrcフォルダを見てみましょう。
ls -al ./src
開発者は、このリストにあるApp.jsをアプリ内容に合わせて更新したり、コンポーネントファイルである.js(x)ファイルを追加します。どのように、追加・編集するかは、次回以降に！
それでは、また…
コメント