文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 ====== 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 "astro telemetry disable" 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 "pnpm approve-builds" 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> typescript/deno/react.txt 最終更新: 2025/04/21 04:29by ともやん
ともやん ともやん