====== React アプリを構築する ====== {{:javascript:deno_logo.svg?120|Deno}} {{:javascript:deno:react.svg?120|React}} 公式: [[https://docs.deno.com/runtime/tutorials/how_to_with_npm/react/|Build a React App - docs.deno.com]]\\ ===== Astro と Deno を使って React アプリを作成する ===== {{:javascript:deno:astro-logo-light-gradient.svg?120|Astro}} {{:javascript:deno:react.svg?120|React}} 公式: [[https://astro.build/|Astro]]\\ ソースコード: [[https://github.com/withastro/astro|GitHub - withastro/astro: The web framework for content-driven websites. ⭐️ Star to support our work!]]\\ ドキュメント: [[https://docs.astro.build/ja/getting-started/|はじめに | Docs - astro.build]]\\ ==== プロジェクト作成 ====

$ deno run -A npm:create-astro@latest

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./magical-moon

   dir   Where should we create your new project?
         react-haruo-world_astro

  tmpl   How would you like to start your new project?
         ● A basic, minimal starter (recommended)
         ○ Use blog template 
         ○ Use docs (Starlight) template

  tmpl   How would you like to start your new project?
         A basic, minimal starter

  deps   Install dependencies? (recommended)
         ● Yes  ○ No

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository? (optional)
         ○ Yes  ● No

   git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

 ██████  Project initializing...
         ■ Template copied
         ▶ Dependencies installing with deno...

      ✔  Project initialized!
         ■ Template copied
         ■ Dependencies installed

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./react-haruo-world_astro 
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

* Astro - [[https://astro.build/|Astro]] ==== プロジェクト実行 ====

$ cd react-haruo-world_astro

**Deno**\\ [[https://deno.com/blog/your-new-js-package-manager|Introducing your new JavaScript package manager: Deno]] [[gtr>https://deno.com/blog/your-new-js-package-manager|翻訳]] も参照...\\

$ deno run dev

Task dev astro dev
▶ Astro collects anonymous usage data.
  This information helps us improve Astro.
  Run "astro telemetry disable" to opt-out.
  https://astro.build/telemetry

06:30:45 [types] Generated 1ms
06:30:45 [content] Syncing content
06:30:45 [content] Synced content

 astro  v5.4.2 ready in 430 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

06:30:45 watching for file changes...

動作確認🤔\\ [[http://localhost:4321/|]]\\ {{:javascript:deno:astro_react_001.png?720|}} ===== Vite と Deno を使って React アプリを作成する ===== {{:javascript:deno:vitejs-logo.svg?120|Vite}} {{:javascript:deno:react.svg?120|React}} ==== プロジェクト作成 ====

$ deno run -A npm:create-vite@latest

│
◆  Project name:
│  vite-project
└

│
◇  Project name:
│  react-haruo-world
│
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Others
└

│
◇  Select a framework:
│  React
│
◆  Select a variant:
│  ○ TypeScript
│  ● TypeScript + SWC
│  ○ JavaScript
│  ○ JavaScript + SWC
│  ○ React Router v7 ↗
└

│
◇  Select a variant:
│  TypeScript + SWC
│
◇  Scaffolding project in /home/tomoyan/my_projects/react-haruo-world...
│
└  Done. Now run:

  cd react-haruo-world
  deno install
  deno run dev

* Vite - [[https://vite.dev/|Vite | Next Generation Frontend Tooling]] * SWC - [[https://swc.rs/|Rust-based platform for the Web – SWC]] ==== 依存パッケージをインストール ====

$ cd react-haruo-world

**Deno**\\ [[https://deno.com/blog/your-new-js-package-manager|Introducing your new JavaScript package manager: Deno]] [[gtr>https://deno.com/blog/your-new-js-package-manager|翻訳]] も参照...\\

$ deno install --allow-scripts

**pnpm**\\

$ pnpm install

Downloading @swc/core-linux-x64-gnu@1.11.8: 15.69 MB/15.69 MB, done
Packages: +142
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading @swc/core-linux-x64-musl@1.11.8: 19.82 MB/19.82 MB, done
Progress: resolved 192, reused 26, downloaded 116, added 142, done

dependencies:
+ react 19.0.0
+ react-dom 19.0.0

devDependencies:
+ @eslint/js 9.22.0
+ @types/react 19.0.10
+ @types/react-dom 19.0.4
+ @vitejs/plugin-react-swc 3.8.0
+ eslint 9.22.0
+ eslint-plugin-react-hooks 5.2.0
+ eslint-plugin-react-refresh 0.4.19
+ globals 15.15.0 (16.0.0 is available)
+ typescript 5.7.3 (5.8.2 is available)
+ typescript-eslint 8.26.0
+ vite 6.2.1

╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: @swc/core, esbuild.                                               │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯

Done in 40.7s using pnpm v10.6.1

==== プロジェクト実行 ==== **Deno**\\

$ deno run dev

Task dev vite

  VITE v6.2.1  ready in 2244 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

**pnpm**\\

$ pnpm dev


  VITE v6.2.1  ready in 2244 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

動作確認🤔\\ [[http://localhost:5173/|]]\\ {{:javascript:vite_react_001.png?720|}} ===== レシピ ===== ==== @uiw/react-codemirror ==== 参考: [[md>@s.sandra/creating-javascript-code-editor-using-uiw-react-codemirror-40635454f7a8|Creating JavaScript code editor using uiw/react-codemirror | by Sandra S | Medium]] [[gtr>https://medium.com/@s.sandra/creating-javascript-code-editor-using-uiw-react-codemirror-40635454f7a8|翻訳]]\\

$ pnpm install @uiw/react-codemirror

Packages: +20
++++++++++++++++++++
Progress: resolved 212, reused 142, downloaded 20, added 20, done

dependencies:
+ @uiw/react-codemirror 4.23.10

Done in 8.7s using pnpm v10.6.1

$ pnpm install @codemirror/lang-javascript

Packages: +2
++
Progress: resolved 214, reused 162, downloaded 2, added 2, done

dependencies:
+ @codemirror/lang-javascript 6.2.3

Done in 9.2s using pnpm v10.6.1

$ pnpm install @codemirror/view

Already up to date
Progress: resolved 214, reused 164, downloaded 0, added 0, done

dependencies:
+ @codemirror/view 6.36.4

Done in 3.8s using pnpm v10.6.1

$ pnpm install @uiw/codemirror-extensions-events

Packages: +1
+
Progress: resolved 215, reused 164, downloaded 1, added 1, done

dependencies:
+ @uiw/codemirror-extensions-events 4.23.10

Done in 3.9s using pnpm v10.6.1