0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Mac難民】WSL2でのreactの環境構築

Posted at

#はじめに
ポートフォリオサイトを作りたいと思い、どうせ作るなら流行のreactで作りたいと考える。
ただ環境構築関係のサイト、Udemy、メンターなどもだいたいmac前提が多い。
Macは持っていなかったし、メインのデスクトップPCがwindowsなのと、外に出ないのでラップトップである必要性がない。
あと高い
よってwsl2での最小限のreact環境構築をしてみた。
#環境
windows10Home
wsl2 Ubuntu 20.04LTS

目標環境
nodebrew
nodejs 14.17.0
yarn 1.22.5
create-react-app コマンドのインストール

#環境構築
こちらのサイト[[1]]を参考にした。
nodejs公式[[2]]2021年6月12日現在ではv14.17.0がLTS版における最新のようなのでそこだけ変更。
nodejsのダウンロードはうまくいったが、yarnのインストールがうまくいかないので別のサイト[[3]]を参考にして進めた。
ただ、create-react-appコマンドのパスが通っていない。
記事内にも対策が書いてあったがそれをしてもパスが通っていない。
findコマンドでパスを検索。

cd /
find ./ -name create-react-app

パスが見つかったのでそれを.bashrcに追加してsourceコマンドで更新。
具体的にはexport PATH=$PATH:'/home/ユーザー名/.yarn/bin' を追加。
whichコマンドでパスを確認。

which create-react-app

出力されたらパスが通っています。

あとは[[1]]の通りcreate-react-appコマンドを実行後cdしてからyarn startしたら実行できました。

#おわりに
思ったより簡単でしたが、ある程度linuxの知識がないとやはり環境構築は難しいですね。
dockerも使えるようになったようですし、wsl2でいいのではと思わなくもない。
まあ情報があまりになさすぎるので、お金に余裕がある人はMac買った方がいいとは思います。
それではまた。

#参考文献
[1]:https://www.illumination27.com/105/
[[1]]:WSLでReactを使ってHello Worldしてみた
[2]:https://nodejs.org/ja/download/
[[2]]:nodejs公式
[3]:https://yanor.net/wiki/?Node.js/yarn/yarn%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB+-+Ubuntu
[[3]]:yarnのインストール - Ubuntu

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?