こんにちは。
今回はReact + TypeScriptの環境で色々試してみたいことがあったので、サクッと環境を作ってしまおうと思います。

2024/02/29 追記

投稿した後にメンバーに指摘されたのですが、現場では Vite が主流だそうです。しかも、CRA（create react app）はドキュメント落ちもしており、2022年の4月が最後のアップデートでした。

かなりReact勉強不足でした….精進していきます…！

Reactのプロジェクトを作成

今回はサクッと作りたいので、TypeScriptに対応したプロジェクトにしたいと思います。

npx create-react-app my-bluecode-app --template typescript

「my-bluecode-app」の部分はアプリの名前ですので、適当な名称で大丈夫です。

MacのようなLinux環境だと、EACCESエラーが出てインストールできないこともあります。その場合は、下記のようにsudoコマンドを使ってインストールしてしまうのが手っ取り早いです。

sudp npx create-react-app my-bluecode-app --template typescript

プロジェクトを起動する

作成するとコマンドが出てくるはずなので、それを素直に打って起動で問題ないです。

cd my-bluecode-app
npm start

起動してみたら…

[eslint] EACCES: permission denied, mkdir '/Users/aaa/document/react-test/my-slider-app/node_modules/.cache'

怒られました。node moduleの権限が足りていなかったようですので、パーミッションを変えておきます。

sudo chown -R $(whoami) /Users/aaa/document/react-test/my-slider-app/node_modules

そして再度試すと…

無事開けました！
基本的な記述は「アプリ名/src」に書いていけば問題ないです！

短いですが、今回は以上になります。

bluecodeで一緒に働きませんか？

bluecodeはsystemではなくlifestyleを開発する会社です。
エンジニアやプロジェクトマネージャーをフルタイムからスポットまで様々な働き方で採用を行っております。
釣り人には嬉しい『釣り補助』という制度もございます！
気になった方は、ぜひ一度HPをご覧ください！