<iframe>

<button>

チャレンジ_入門編_テンプレ

チャレンジ_実践編_テンプレ

reactテスト

ターミナル問題テスト

CONSOLE問題テスト

テストのテスト

reactjsxテスト

vue3テスト

vue2テスト

vue3.2テスト

typescript

vueモジュール

Processなし課題

CSSテスト確認

リンクのテスト

sass

scss

隠しファイルテスト

rust

python

ViewZone

分割代入

比較演算子(JavaScript)

オブジェクト{}

変数・定数定義(JavaScript)

console.log

QuizSample

express

echo

katex_sample

Markdown確認challenge1

border

Markdown確認challenge2

wordpress

ファイルロゴチェック

react退避(イベントオブジェクトに型をつけてみよう)

配列操作/forEach

テンプレートリテラル

JavaScript退避

java

deno

rustパーサ

実践チャレンジ用テスト

実践Lessonサンプル

JavaScriptテストサンプル

テストのテスト3

phpApache

http-server

コーディングなし

pythonLib

sandbox-react-js

sandbox-react-ts

sandbox-vue-js

sandbox-vue-ts

Django

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

サンプルコース

サンプルレッスングループ

レッスン_サンプル

このセクションでは

## 生成したとき
Reactプロジェクトを生成し終わったときのメッセージを思い出しましょう。
```bash
Done. Now run:

  cd vite-project
  npm install
  npm run dev
```
この最後に書かれている3コマンドを順に実行していけば、今生成したReactプロジェクトが実行できます。

## プロジェクトフォルダへ移動
まずプロジェクトのフォルダへ移動します。
```bash
cd vite-project
```
前のセクションでプロジェクト名を違う名前にした場合は、`vite-project`の部分をプロジェクト名に置き換えて実行してください。

## ライブラリのインストール
次にReactプロジェクトを動かすのに必要なライブラリのインストールを行います。
```bash
npm install
```
このコマンドにより、依存関係が含まれているパッケージ`node_modules`が作成されます。

ネットワーク状況によっては終わるまでに多少時間がかかる可能性があります。
このようなメッセージが出るまで待ちましょう。
```bash
added 258 packages, and audited 259 packages in 25s

107 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
```

## サーバーの起動
最後に開発サーバーの起動を行います。
```bash
npm run dev
```

起動に成功したら以下のようなメッセージが表示されます。
```
  VITE v5.4.11  ready in 231 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.0.2.0:5173/
  ➜  press h + enter to show help
```
`Local: `のところに書かれているURLが、Reactプロジェクトから生成されたウェブサイトのURLです。

## ローカルホストへ接続
Webブラウザで[`http://localhost:5173/`](http://localhost:5173/)を開きましょう。
以下のようにプロジェクトの初期画面が表示されたら成功です！
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/bbc67d59-f1de-44e4-9459-65f450638407.png)


Viteプロジェクトの実行

4. Viteプロジェクトの実行