React 環境構築
この記事の内容
この記事ではVSCodeを用いたReactによる開発の環境構築について説明します。
1.VSCodeのインストール
まず初めにVSCodeのインストールを行います。 こちらのサイトにアクセスしてもらって、画面の表示に沿ってインストールしていただければ大丈夫です。
2.Node.jsのインストール
次にJavaScriptをターミナル上で実行できるようになるNode.jsをインストールしていきたいと思います。 こちらのサイトからインストールしていただいて、画面の表示に従ってインストールしていたがければ大丈夫です。
この2つさえインストールしてしまえばReactはかけるのですが、ここからはいれると良い拡張機能や初めてのReactのテンプレートの作り方を紹介します。
3.いれると良いVSCode拡張機能
ここではいれると良いVSCodeの拡張機能について説明していきます。
Reactの開発する上で絶対と言っていいほど入れてほしいのがPrettierという拡張機能です。
VSCodeの拡張機能のタブで検索してインストールしてみてください。本当に世界が変わります。簡単に機能を説明するとコードを見やすく整えてくれるという機能の拡張機能です。
ですがインストールしただけでは、いちいちショートカットなどで整えているとめんどくさいので保存するときに自動で整列してくれるようにします。
VSCodeの左下の歯車マークから設定画面に進みます。そしてFormat On Saveという項目にチェックを入れます。そしてDefault Formatterという項目でPrettier - Code fomatterを選択します。これによってファイルを保存するたびにコードを整えてくれます。
4.Reactプロジェクトの作成
ここまで来たらあとはReactのプロジェクトの作成の方法さえ知ってればReactでの開発を始めることができます。ここではcreate-react-appを使う方法とviteを用いてインストールする方法について説明します。
1.create-react-appを用いる方法
create-react-appというコマンドを用いてReactプロジェクトを作る際には
npx create-react-app プロジェクト名
というコマンドを使用することで作ることができます。
2.viteを用いる方法
viteというサービスを用いてReactのプロジェクトを作る際は
npm create vite@latest プロジェクト名
とすると、フレームワークの選択肢が出てくると思うので、Reactを選択し、TypeScriptで記述するかJavaScriptで記述するかを選択することで、Reactプロジェクトを作成することができます。
作成後には
npm i
を実行しなければいけませんが、こちらのほうが作成する時間が短いです。
最後に
どうでしたか、無事Reactプロジェクトを作成することができましたか？もしも間違いなどがありましたら連絡していただけるとありがたいです。
Discussion