差分

このページの2つのバージョン間の差分を表示します。

--- typescript:deno:react [2025/04/21 04:29] – 削除 - 外部編集 (不明な日付) 非ログインユーザー
+++ typescript:deno:react [2025/04/21 04:29] (現在) – ↷ javascript:deno:react から typescript:deno:react へページを移動しました。ともやん
@@ 行 1: / 行 1: @@
+====== React アプリを構築する ======
+<WRAP group logo>
+<WRAP column zoomimg w100 x1_2>
+{{:javascript:deno_logo.svg?120|Deno}}
+{{:javascript:deno:react.svg?120|React}}
+</WRAP>
+</WRAP>
+公式: [[https://docs.deno.com/runtime/tutorials/how_to_with_npm/react/|Build a React App - docs.deno.com]]\\
+===== Astro と Deno を使って React アプリを作成する =====
+<html><style> #astro img { background-color: rgb(23 25 30); }</style></html>
+<WRAP group logo>
+<WRAP v-align_mid zoomimg w100 x1_2 #astro>
+{{:javascript:deno:astro-logo-light-gradient.svg?120|Astro}}
+</WRAP>
+<WRAP v-align_mid zoomimg w100 x1_2>
+{{:javascript:deno:react.svg?120|React}}
+</WRAP>
+</WRAP>
+公式: [[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]]\\
+==== プロジェクト作成 ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> npm:create-astro@latest
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#26A269"> </span><span style="background-color:#26A269"><font color="#171421">astro</font></span><span style="background-color:#26A269"> </span>  Launch sequence initiated.
+  <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">dir</font></span><span style="background-color:#883AE2"> </span>  Where should we create your new project?
+         ./magical-moon
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+  <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">dir</font></span><span style="background-color:#883AE2"> </span>  Where should we create your new project?
+         react-haruo-world_astro
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+ <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">tmpl</font></span><span style="background-color:#883AE2"> </span>  How would you like to start your new project?
+         <font color="#26A269">●</font> A basic, minimal starter (recommended)
+<font color="#7D7D7D">         ○ Use blog template </font>
+<font color="#7D7D7D">         ○ Use docs (Starlight) template</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+ <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">tmpl</font></span><span style="background-color:#883AE2"> </span>  How would you like to start your new project?
+         A basic, minimal starter
+ <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">deps</font></span><span style="background-color:#883AE2"> </span>  Install dependencies? (recommended)
+         <font color="#26A269">●</font> Yes  ○ No
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+ <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">deps</font></span><span style="background-color:#883AE2"> </span>  Install dependencies?
+         Yes
+  <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">git</font></span><span style="background-color:#883AE2"> </span>  Initialize a new git repository? (optional)
+         ○ Yes  <font color="#26A269">●</font> No
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+  <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">git</font></span><span style="background-color:#883AE2"> </span>  Initialize a new git repository?
+         No
+      <font color="#2AA1B3">◼</font>  <font color="#2AA1B3">Sounds good!</font> You can always run git init manually.
+ <font color="#883AE3">█</font><font color="#7B30E7">█</font><font color="#6B22EF">█</font><font color="#5711F8">█</font><font color="#3640FC">█</font><font color="#2387F1">█</font>  Project initializing...
+         ■ Template copied
+         <font color="#2AA1B3">▶ Dependencies installing with deno...</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre class=Bsc>
+      <font color="#26A269">✔</font>  <font color="#26A269">Project initialized!</font>
+         ■ Template copied
+         ■ Dependencies installed
+ <span style="background-color:#2AA1B3"> </span><span style="background-color:#2AA1B3"><font color="#171421">next</font></span><span style="background-color:#2AA1B3"> </span>  <b>Liftoff confirmed. Explore your project!</b>
+         Enter your project directory using <font color="#2AA1B3">cd ./react-haruo-world_astro </font>
+         Run <font color="#2AA1B3">npm run dev</font> to start the dev server. <font color="#2AA1B3">CTRL+C</font> to stop.
+         Add frameworks like <font color="#2AA1B3">react</font> or <font color="#2AA1B3">tailwind</font> using <font color="#2AA1B3">astro add</font>.
+         Stuck? Join us at <font color="#2AA1B3">https://astro.build/chat</font>
+╭─────╮  <font color="#33C7DE"><b>Houston:</b></font>
+│ ◠ <font color="#33C7DE">◡</font> ◠  Good luck out there, astronaut! 🚀
+╰─────╯
+</pre></html></WRAP>
+</WRAP>
+  * Astro - [[https://astro.build/|Astro]]
+==== プロジェクト実行 ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">cd</font> <u style="text-decoration-style:solid">react-haruo-world_astro</u>
+</pre></html></WRAP>
+</WRAP>
+**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|翻訳]] も参照...\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run dev
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">Task</font> <font color="#2AA1B3">dev</font> astro dev
+<font color="#12488B">▶ Astro collects anonymous usage data.</font>
+  This information helps us improve Astro.
+  Run &quot;astro telemetry disable&quot; to opt-out.
+  <font color="#2AA1B3"><u style="text-decoration-style:solid">https://astro.build/telemetry</u></font>
+<font color="#7D7D7D">06:30:45 </font><font color="#12488B">[types]</font> Generated 1ms
+<font color="#7D7D7D">06:30:45 </font><font color="#12488B">[content]</font> Syncing content
+<font color="#7D7D7D">06:30:45 </font><font color="#12488B">[content]</font> Synced content
+<span style="background-color:#26A269"><b> astro </b></span> <font color="#26A269">v5.4.2</font> ready in 430 ms
+<font color="#7D7D7D">┃ Local    </font><font color="#2AA1B3">http://localhost:4321/</font>
+<font color="#7D7D7D">┃ Network  use --host to expose</font>
+<font color="#7D7D7D">06:30:45 </font><font color="#26A269">watching for file changes...</font>
+</pre></html></WRAP>
+</WRAP>
+動作確認🤔\\
+[[http://localhost:4321/|]]\\
+<WRAP zoomimg w600 w1_2>
+{{:javascript:deno:astro_react_001.png?720|}}
+</WRAP>
+===== Vite と Deno を使って React アプリを作成する =====
+<WRAP group logo>
+<WRAP column zoomimg w100 x1_2>
+{{:javascript:deno:vitejs-logo.svg?120|Vite}}
+{{:javascript:deno:react.svg?120|React}}
+</WRAP>
+</WRAP>
+==== プロジェクト作成 ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> npm:create-vite@latest
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#666666">│</font>
+<font color="#2AA1B3">◆</font>  Project name:
+<font color="#2AA1B3">│</font>  <span style="background-color:#BBBBBB"><font color="#101050">v</font></span><font color="#7D7D7D">ite-project</font>
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#666666">│</font>
+<font color="#26A269">◇</font>  Project name:
+<font color="#666666">│</font>  react-haruo-world
+<font color="#666666">│</font>
+<font color="#2AA1B3">◆</font>  Select a framework:
+<font color="#2AA1B3">│</font>  ○ <font color="#6C4C32">Vanilla</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#196C46">Vue</font>
+<font color="#2AA1B3">│</font>  <font color="#26A269">●</font> <font color="#2AA1B3">React</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#6D2F7C">Preact</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#A44036">Lit</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#80121A">Svelte</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#0C305D">Solid</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#1C5294">Qwik</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#80121A">Angular</font>
+<font color="#2AA1B3">│</font>  ○ Others
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#666666">│</font>
+<font color="#26A269">◇</font>  Select a framework:
+<font color="#666666">│</font>  <font color="#1C6B77">React</font>
+<font color="#666666">│</font>
+<font color="#2AA1B3">◆</font>  Select a variant:
+<font color="#2AA1B3">│</font>  ○ <font color="#0C305D">TypeScript</font>
+<font color="#2AA1B3">│</font>  <font color="#26A269">●</font> <font color="#12488B">TypeScript + SWC</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#6C4C32">JavaScript</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#6C4C32">JavaScript + SWC</font>
+<font color="#2AA1B3">│</font>  ○ <font color="#1C6B77">React Router v7 ↗</font>
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#666666">│</font>
+<font color="#26A269">◇</font>  Select a variant:
+<font color="#666666">│</font>  <font color="#0C305D">TypeScript + SWC</font>
+<font color="#666666">│</font>
+<font color="#26A269">◇</font>  Scaffolding project in /home/tomoyan/my_projects/react-haruo-world...
+<font color="#666666">│</font>
+<font color="#666666">└</font>  Done. Now run:
+  cd react-haruo-world
+  deno install
+  deno run dev
+</pre></html></WRAP>
+</WRAP>
+  * Vite - [[https://vite.dev/|Vite | Next Generation Frontend Tooling]]
+  * SWC - [[https://swc.rs/|Rust-based platform for the Web – SWC]]
+==== 依存パッケージをインストール ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">cd</font> <u style="text-decoration-style:solid">react-haruo-world</u>
+</pre></html></WRAP>
+</WRAP>
+**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|翻訳]] も参照...\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> install <font color="#A347BA">--allow-scripts</font>
+</pre></html></WRAP>
+</WRAP>
+**pnpm**\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install
+</pre></html></WRAP>
+<WRAP color_result><html><pre class=Bsc>
+Downloading <font color="#FFFFFF">@swc/core-linux-x64-gnu@1.11.8</font>: <font color="#33C7DE">15.69 MB</font>/<font color="#33C7DE">15.69 MB</font>, done
+Packages: <font color="#26A269">+142</font>
+<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
+Downloading <font color="#FFFFFF">@swc/core-linux-x64-musl@1.11.8</font>: <font color="#33C7DE">19.82 MB</font>/<font color="#33C7DE">19.82 MB</font>, done
+Progress: resolved <font color="#33C7DE">192</font>, reused <font color="#33C7DE">26</font>, downloaded <font color="#33C7DE">116</font>, added <font color="#33C7DE">142</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> react <font color="#666666">19.0.0</font>
+<font color="#26A269">+</font> react-dom <font color="#666666">19.0.0</font>
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @eslint/js <font color="#666666">9.22.0</font>
+<font color="#26A269">+</font> @types/react <font color="#666666">19.0.10</font>
+<font color="#26A269">+</font> @types/react-dom <font color="#666666">19.0.4</font>
+<font color="#26A269">+</font> @vitejs/plugin-react-swc <font color="#666666">3.8.0</font>
+<font color="#26A269">+</font> eslint <font color="#666666">9.22.0</font>
+<font color="#26A269">+</font> eslint-plugin-react-hooks <font color="#666666">5.2.0</font>
+<font color="#26A269">+</font> eslint-plugin-react-refresh <font color="#666666">0.4.19</font>
+<font color="#26A269">+</font> globals <font color="#666666">15.15.0</font> <font color="#666666">(16.0.0 is available)</font>
+<font color="#26A269">+</font> typescript <font color="#666666">5.7.3</font> <font color="#666666">(5.8.2 is available)</font>
+<font color="#26A269">+</font> typescript-eslint <font color="#666666">8.26.0</font>
+<font color="#26A269">+</font> vite <font color="#666666">6.2.1</font>
+<font color="#A2734C">╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮</font>
+<font color="#A2734C">│</font>                                                                                            <font color="#A2734C">│</font>
+<font color="#A2734C">│</font>   Ignored build scripts: @swc/core, esbuild.                                               <font color="#A2734C">│</font>
+<font color="#A2734C">│</font>   Run &quot;pnpm approve-builds&quot; to pick which dependencies should be allowed to run scripts.   <font color="#A2734C">│</font>
+<font color="#A2734C">│</font>                                                                                            <font color="#A2734C">│</font>
+<font color="#A2734C">╰────────────────────────────────────────────────────────────────────────────────────────────╯</font>
+Done in 40.7s using pnpm v10.6.1
+</pre></html></WRAP>
+</WRAP>
+==== プロジェクト実行 ====
+**Deno**\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run dev
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">Task</font> <font color="#2AA1B3">dev</font> vite
+  <font color="#33D17A"><b>VITE</b></font><font color="#26A269"> v6.2.1</font>  ready in <b>2244</b> ms
+  <font color="#26A269">➜</font>  <b>Local</b>:   <font color="#2AA1B3">http://localhost:</font><font color="#33C7DE"><b>5173</b></font><font color="#2AA1B3">/</font>
+<font color="#7D7D7D">  </font><font color="#196C46">➜</font><font color="#7D7D7D">  </font><font color="#7D7D7D"><b>Network</b></font><font color="#7D7D7D">: use </font><b>--host</b><font color="#7D7D7D"> to expose</font>
+<font color="#196C46">  ➜</font><font color="#7D7D7D">  press </font><b>h + enter</b><font color="#7D7D7D"> to show help</font>
+</pre></html></WRAP>
+</WRAP>
+**pnpm**\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> dev
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+  <font color="#33D17A"><b>VITE</b></font><font color="#26A269"> v6.2.1</font>  ready in <b>2244</b> ms
+  <font color="#26A269">➜</font>  <b>Local</b>:   <font color="#2AA1B3">http://localhost:</font><font color="#33C7DE"><b>5173</b></font><font color="#2AA1B3">/</font>
+<font color="#7D7D7D">  </font><font color="#196C46">➜</font><font color="#7D7D7D">  </font><font color="#7D7D7D"><b>Network</b></font><font color="#7D7D7D">: use </font><b>--host</b><font color="#7D7D7D"> to expose</font>
+<font color="#196C46">  ➜</font><font color="#7D7D7D">  press </font><b>h + enter</b><font color="#7D7D7D"> to show help</font>
+</pre></html></WRAP>
+</WRAP>
+動作確認🤔\\
+[[http://localhost:5173/|]]\\
+<WRAP zoomimg w600 w1_2>
+{{:javascript:vite_react_001.png?720|}}
+</WRAP>
+===== レシピ =====
+==== @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|翻訳]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install @uiw/react-codemirror
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+20</font>
+<font color="#26A269">++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">212</font>, reused <font color="#33C7DE">142</font>, downloaded <font color="#33C7DE">20</font>, added <font color="#33C7DE">20</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> @uiw/react-codemirror <font color="#666666">4.23.10</font>
+Done in 8.7s using pnpm v10.6.1
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install @codemirror/lang-javascript
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+2</font>
+<font color="#26A269">++</font>
+Progress: resolved <font color="#33C7DE">214</font>, reused <font color="#33C7DE">162</font>, downloaded <font color="#33C7DE">2</font>, added <font color="#33C7DE">2</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> @codemirror/lang-javascript <font color="#666666">6.2.3</font>
+Done in 9.2s using pnpm v10.6.1
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install @codemirror/view
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Already up to date
+Progress: resolved <font color="#33C7DE">214</font>, reused <font color="#33C7DE">164</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">0</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> @codemirror/view <font color="#666666">6.36.4</font>
+Done in 3.8s using pnpm v10.6.1
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install @uiw/codemirror-extensions-events
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+1</font>
+<font color="#26A269">+</font>
+Progress: resolved <font color="#33C7DE">215</font>, reused <font color="#33C7DE">164</font>, downloaded <font color="#33C7DE">1</font>, added <font color="#33C7DE">1</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> @uiw/codemirror-extensions-events <font color="#666666">4.23.10</font>
+Done in 3.9s using pnpm v10.6.1
+</pre></html></WRAP>
+</WRAP>