0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【プログラミング初心者】0から始めるReact学習 #7 ~Web開発の基本編~

Posted at

1-3. 課題1

9月9日

ロードマップにある「はじめに」のリンクに飛び、Viteをインストールしようと試みました。
コマンドプロンプトを開き、以下のコードを打ちこんでみます。

npm create vite@latest

すると、なんと警告が出ました(笑)
error2_npm.png

静かに焦りましたが、なぜ警告が出たのか考えていると

互換性について
Vite  Node.js 18+ または 20+ のバージョンが必要です。
ただし、一部のテンプレートではそれ以上のバージョンの Node.js を必要としますので、
パッケージマネージャーが警告を出した場合はアップグレードしてください。

きちんと注意書きが記載されておりました。

なので、まずはnodeをインストールしていきます。
インストール方法はこちらのサイトを参考にしました。

nodeのインストールが完了後、VScodeを立ち上げて「ターミナル」を開きました。
(先ほどはコマンドプロンプトを開きましたが、過去に友人とReactを勉強しようとした際にVScodeからインストールしていた気がしたので、記憶を頼りに試してみました。)

ターミナルへ先ほどのコードを打ち込み、画面表示に従っていくと無事にViteプロジェクトを作成できました。

ここからは"vite-project"を探し出し、VScodeで開いて「Hello World」を表示させました。
HelloWorld.png
正しくできているか分からない中やっていったので、
1時間ほどかかってしまいましたが何とか表示させるまで辿り着きました。

本日はもう24時も近いので

□タイトル「学習記録一覧」を見ることができる

までで終わります。

まとめ

明日からは、ようやくアプリの作成に入れます。
今日のように苦戦する気配がありますが挫けず頑張ります(笑)
おやすみなさい!

0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?