【2024年】React環境構築を1から丁寧に初めてみよう【viteを利用】

[@usage_sa]

バックエンドから急にフロント開発を任されるようになったので参考にさせてもらいます！
いつもありがとうございます。

[@programming_tutorial_youtube]

いいですね！
フロントエンドも楽しいので、ぜひこれを機にがんばってくださいね

[@オカムラ-k7g]

viteでssr、ssgの実装方法解説してほしいです！
vikeが難しく、nextjsにリプレイスするほうが簡単な気がしております。

[@tersai9300]

shin codeさんのudemyで勉強中のものです。
30:45辺りで、npx husky installコマンドを実行したら、install command is deprecatedというのが出てhuskyディレクトリは出来たのですが、husky.shの中身が空っぽです。
修正方法をご教示頂ければ幸いです。

[@programming_tutorial_youtube]

ご視聴ありがとうございます。
これなのですが、恐らくgitのリポジトリを作成してからのコマンドになります。
なのでリポジトリを作って、git initなどの操作をしてから(リポジトリにあるコードをコピペすればいいです)npx husky installをすると良いみたいです。ブログにも書いてますので、ちょっと試してみてください。
shincode-hp.pages.dev/blog/react-env-setup-2024/

[@SSS-y4t]

いつも動画拝見させてもらっています！
Prettierの設定のところで質問なのですが、settings.jsonがread onlyで編集ができません。対処法あれば教えていただきたいです！
※ちなみにエディタはCursorを使用しています。

[@programming_tutorial_youtube]

Windowsの場合、VSCodeのショートカットを右クリックして「管理者として実行」を選択します。これで以下がでしょうか。

[@SSS-y4t]

すみません。そちらの方法ではうまくいかなかったのですが、settings.jsonではなく、VSCodeの設定（GUI）の方で変更ができました！
連投で申し訳ないのですが、READMEのみを変更してプッシュするとGit HubのActionsでエラーになってしまいますが、これはなぜでしょうか？

[@さんみつお]

next.jsを使用したい場合でも、同様の方法で行えば良いですか？

[@programming_tutorial_youtube]

vite以外では同様の方法で良いかと思います！

[@みろはち]

react初学者なのですが色々調べているとcreate-react-appを使う動画や記事が散見します。viteを使う場合と何が違うのでしょうか？

[@programming_tutorial_youtube]

viteで環境作った方が起動時間が早いのでcreate-react-appで作るよりも高速に開発ができます。なので僕はviteをおすすめしますね！

[@URYYYYYYYYYYYhg]

viteではreactは使用可能だけど、まだnext.jsが使用できないということでしょうか

[@programming_tutorial_youtube]

viteはまだnext.js対応はしていないですね。Reactを利用している方に向けた動画になりますね！

[@しんいちの茶汁]

dockerでこの環境を使い回す場合どこからどこまでのイメージをビルドしたらいいですか？

[@鈴木-z5w]

EsLintの構文チェックの除外の条件を追加してもエラーが消えません

[@DNK_KND]

2024.7月現在のバージョンでは'react/react-in-jsx-scope': 'off', は効かないので、単純にApp.tsx にimport React from 'react' を追加記述した方が早いかもです。

[@鈴木-z5w]

@@DNK_KND 回答ありがとうございます。
import React from 'react' を追加して開発を進めたところ、eslintの警告メッセージは依然として残っており、buildすることができません。対処法を教授いただきますと幸いです

[@vladbach8605]

この動画の内容とは関係ないんですが、WebGPUってもう試されましたか？

[@programming_tutorial_youtube]

いえ！WebGPUはないですね、、シェーダー言語であれば触ったことがありますが。。知見がなくてすみません。

[@vladbach8605]

@@programming_tutorial_youtube ちょっとややこしそうですが、babylonではすでにライブラリーがあるんだとか。Three.jsでも早くライブラリー出来ないかなと思ってます。そうなったらまたユーデミーで知識を共有してください！

[@tomahouku]

バックエンドエンジニアだったので、フロントエンドの移り変わりの早さに全然ついていけないです_:(´ཀ`」 ∠):
でも面白い( ´ ▽ ` )

[@javalkyr2402]

5秒しかみてないけどもしかして構築だけで1時間かかるのか

[@programming_tutorial_youtube]

コピペでもOKですので、かかって10分くらいでもできるかなと思います。一度作れば使いまわしもできますし、僕の使ってもらっても大丈夫です。