Laravel+React でWebアプリを構築する [使用技術: Laravel Sail, Laravel Breeze, Inertia, TailwindCss, Vite] - Qiita
Laravel+React でWebアプリを構築する [使用技術: Laravel Sail, Laravel Breeze, Inertia, TailwindCss, Vite]LaravelDockerBreezeReacttailwindcss この記事でやりたいこと 以下の技術を使用して、 Laravel + React でWebアプリを構築していきます。 Laravel Sail によるDocker開発環境の構築 Laravel Breezeスターターキット（Inertiaを使用してフロントエンドにReactを実装） Laravel Breeze の認証機能 TailwindCssを使った装飾 Laravel Vite によるフロントエンドのビルド (手順が多く複雑なので、自分用にメモを残すついでに記事にします...!） 動作環境 - macOS 13.5.2 - PHP 8.
![Laravel+React でWebアプリを構築する [使用技術: Laravel Sail, Laravel Breeze, Inertia, TailwindCss, Vite] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/df49c9ae7a9e4411f01ab1542ec894feeb62576c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9TGFyYXZlbCUyQlJlYWN0JTIwJUUzJTgxJUE3V2ViJUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgyJTkyJUU2JUE3JThCJUU3JUFGJTg5JUUzJTgxJTk5JUUzJTgyJThCJTIwJTVCJUU0JUJEJUJGJUU3JTk0JUE4JUU2JThBJTgwJUU4JUExJTkzJTNBJTIwTGFyYXZlbCUyMFNhaWwlMkMlMjBMYXJhdmVsJTIwQnJlZXplJTJDJTIwSW5lcnRpYSUyQyUyMFRhaWx3aW5kQ3NzJTJDJTIwViVFMiU4MCVBNiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODVlZDVjZDdmYmE5YmZlMWY1OTczYzY3MTI0MDRkYmI%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwU2hvLXRhcm8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTkwM2NkOTU1ZjJjNWExMjU1MWVmNjI0ZWI4YjVmYTMy%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da51a537e633316d7b862b7500eabf38c)
両面どころかインフラもTSでできるよ ～ 全方位TypeScriptによるプロダクト開発 ～
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト | The WebStorm Blog
JetBrains は過去 7 年間にわたり、変化し続ける開発者の状況と使用されている主要テクノロジーを関連付けるために開発者エコシステムアンケートを実施してきました。 その結果は生データと分析レポートの両方の形式でコミュニティと共有され、すべての関係者がこのエコシステムの状況を把握できるようになっています。 本日は今年の調査結果を JavaScript と TypeScript に焦点を当てて確認したいと思います。 アンケートの概要 2023 年の開発者エコシステムアンケートでは、世界中の 26,348 人の開発者からインサイトを収集しました。 このアンケートの結果を自分で確認し、プログラミング言語やツール、テクノロジーから回答者に関する有用な情報や豆情報に至るまで広範なトピックを網羅した情報を入手できます。 私たちは開発者独特のライフスタイルにも注目し、その情熱や興味を明らかにする予定
React Forget は何を「忘れ」させてくれるのか
はじめに こんにちは、株式会社TERASSでエンジニアをしている myrear です。 先日 React Blog にて公開された React Labs: 私達のこれまでの取り組み - 2024年2月版 という記事に React Compiler に関する記述があります。 この React Compiler とは React コードを自動的に最適化し、それにより開発者はメモ化について考える必要がなくなる(忘れることができる)というものです。 まるで魔法のようですが、一体どのような方法でコードの最適化を実現しているのでしょうか？ 本記事では2023年秋の講演の動画を自動翻訳字幕で追いながら要所要所をかいつまんで解説していきます。 React Forget とは？ 先述の通り React コードを自動的に最適化してくれるコンパイラです。 具体的には JavaScript と React のルー
React Server Components を使うためのミニマムなフレームワーク Waku
http://localhost:3000/ にアクセスすると、Waku のデフォルトのページが表示されます。 React Server Components 冒頭で述べたように、Waku は React Server Components に対応しています。React Server Components は React の新しいパラダイムであり、サーバー上でのみ実行されるコンポーネントを提供します。サーバー上でのみ実行されることで、以下のような利点があります。 クライアントに JavaScript が送信されないため、バンドルサイズを削減できる コンポーネントを非同期関数として、直接データベースや外部 API からデータを取得でき、パフォーマンス上の利点がある React Server Components は、サーバー上でのみ実行されるため、クライアント側でのイベントハンドリングや状態
HonoでAPI付き雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
HonoでAPIだけ作って素のReact DOMでSPAを書くアーキテクチャ
という構成を手軽に作れるようになっていて便利でした これを軸に素のReact APIを触って遊ぶ環境が作れそうです(Server APIもworkerdで動く範囲なら使えるかも?) とりあえず以下のソースコードでデプロイまでできるかを試しました プロジェクトのベースはnpm create hono@latestで作りました DEMO: https://hono-spa-react.pages.dev/ react react-dom @vitejs/plugin-react-swc をnpm installしています デバッグ しかしこの構成だと@hono/vite-dev-serverによるvite devは実行時エラーになり動きません(!) react-dom_client.js?v=f8955f15:11222 Uncaught Error: Objects are not vali
雑にReactアプリを作りたい時に使ってるもの
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
React Developer Roadmap 2024 を眺める
はじめに React Developer Roadmap 2024 を眺めつつ筆者の独り言を書く記事です。筆者の React 歴は 3 年ちょっとです。 Visit JavaScript Roadmap React のロードマップは JavaScript の勉強が最初。Promise を基本とした非同期処理やクロージャ周りを理解しておくと、React への理解も更に深まった記憶がある。 非同期周りはこの本に助けられた。 CLI Tools Vite Create React App 新規に CSR の SPA を作る場合 Vite 一択だと思う。理由は、設定簡単 + 早い + 拡張性 ◎ + エコシステムが大きい。Vite は SSR もできるがライブラリ作者向け。 (宣伝) Vite を使用した環境構築方法は先日記事にしました。 なぜ Create React App が使われなくなりつ
golang+reactなアプリの開発環境をモノレポで作る
カラビナテクノロジーでは、zennでのテックブログをはじめました。 今回はそんな技術ブログの一発目の記事を、バックエンド開発をメインに担当していますブラボー(bravo)が書いていきます。 モノレポという、1つのリポジトリに複数のアプリを1つのリポジトリに保存するというパターンがあるということを知ったので、 実際にその構成での開発環境を作ってみます。 今回考えるのは、APIサーバとしてgolangで作られたものがあり、reactではそのフロントエンドを実装するようなアーキテクチャにします。 図で言えばこんな感じです。 この記事で達成すること golangでAPIの開発環境を作る reactの開発環境を作る 1つのリポジトリで↑2つのアプリが保存されている再現できる(モノレポ構成にする) reactとgolangをモノレポで構成 言語、ミドルウェアのバージョン 言語、ミドルウェア バージョン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
