目次

React アプリを構築する

公式: Build a React App - docs.deno.com

Astro と Deno を使って React アプリを作成する

公式: Astro
ソースコード: GitHub - withastro/astro: The web framework for content-driven websites. ⭐️ Star to support our work!
ドキュメント: はじめに | 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! 🚀
╰─────╯

プロジェクト実行

$ cd react-haruo-world_astro

Deno
Introducing your new JavaScript package manager: Deno 翻訳 も参照…

$ 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/

Vite と Deno を使って 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

依存パッケージをインストール

$ cd react-haruo-world

Deno
Introducing your new JavaScript package manager: Deno 翻訳 も参照…

$ 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/

レシピ

@uiw/react-codemirror

参考: Creating JavaScript code editor using uiw/react-codemirror | by Sandra S | Medium 翻訳

$ 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