React部分導入時の開発・検証環境紹介｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の1日目の記事です。 2020年も残り1ヶ月になりました。早いものですね。 この記事を執筆するのは、食べログでフロントエンドチームに所属する@hagevvashiです。 はじめに食べログではRuby on Rails(以下RoR)を用いており、サイトの大部分がRoRによってHTMLのレンダリングまで行われています。JavaScriptでの実装はほとんどがjQueryなどを用いた非宣言的なものとなっています。 歴史あるサービスなので、それなりにコード量が増えかつ複雑になっています。例えば既存のjQueryやBackbone.jsで書かれたソースコードを変更するのに予想外のコストを強いられたりします。 食べログを引き続きユーザにとって価値のあるサービスにするためには、いち早く新しい機能を届ける必要があります。そして、そういった予想外のコストを少しで
SPA化するMPAとMPA化するSPA ～TechFeed Experts Night#4 講演より | gihyo.jp
本記事は、2022年9月に開催された「TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語る」のセッション書き起こし記事「SPA化するMPAとMPA化するSPA（@yosuke_furukawa） ― TechFeed Experts Night#4 フロントエンドアーキテクチャを語る」を転載したものです。オリジナルはTechFeedをご覧ください。 古川と申します。@yosuke_furukawaでTwitterなどをやっております。 SPAは”見えるようになるまでが遅い” 私が今回お話するのは「MPA化するSPA」です。もともとSPAは、画面遷移（トランジション）をアプリケーションに合わせて最適化することを目的として発展した技術だと思っています。変更が発生したところだけレンダリングすることで高速化するテクニックだったのが、それをすべてのページで行う
Multi Page Application with React
In the world of web development, we can list two main design patterns for the web apps: multi-page application (MPA) and single-page application (SPA). In this blog post, I will focus on the integration of react library into a multi page app. The classical architecture that requires reloading of a web-page in order to load or send data from/to server in the user’s browser. What I’m planning to do
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
Amplify UIを使ってReactアプリにAmazon Cognitoの認証フォームを実装する | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 AWS Amplifyでアプリケーションを構築すると、WebサイトホスティングからAPIバックエンド、CI/CD、認証機能までをまるっと構築できて便利ですが、AmplifyライブラリのうちAmplify UIだけを使用して、アプリケーションに認証機能やログインUIのみを追加することもできます。 Amplify UI 今回は、Amplify UIを使ってReactアプリにAmazon Cognitoの認証フォームを実装してみました。 やってみた 主に次の公式ドキュメントを参考に実装してみます。 Installation | Amplify UI Authenticator | Amplify UI Cognito UserPoolの作成 下記エントリなどを参考に、Webアプリ（SPA）などからOAuth2.0認証により使用できるCognit
React、React Hooks、Axios を用いて CRUD 操作を実行する方法
原文: How to Perform CRUD Operations using React, React Hooks, and Axios React を扱っていれば、API リクエストを理解し実装するのはとても難しいと感じられるでしょう。 そこでこの記事では、React 、React Hooks、React Router、Axios を用いて CRUD 操作を実装することにより、そのすべてがどのように機能するかを学んでいきます。 さあはじめましょう。 Node と npm をインストールする方法まず最初に、Node をシステム内にインストールしましょう。私たちは主にそれを用いて JavaScript のコードを実行します。 Node をダウンロードするには、https://nodejs.org/en/ にアクセスしてください。 Node上に構築された Node パッケージマネージャー
既存のウェブサイトに React を追加する – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 React を追加するためのおすすめの方法については、既存プロジェクトに React を追加するを参照してください。 まずは必要なぶんだけ使ってみましょう。 React は当初から、段階的に導入することができるようにデザインされています。つまり最小限の部分で React を利用することも、あるいは大規模に React を利用することも可能です。既存のページにちょっとしたインタラクティブ性をもたせたいだけでも構いません。React コンポーネントを使えばお手の物です。 多くのウェブサイトはシングルページアプリケーションではありませんし、そうする必要もありません。まずはたった数行のコードから、あなたのウェブサイトに React を取り入れてみましょう。ビルド
明月の開発ストーリ :: [Java] 64.Spring bootとReactを連結する方法(Buildする方法)
こんにちは。明月です。 この投稿はSpring bootとReactを連結する方法(Buildする方法)に関する説明です。 最近のプロジェクトのトレンドはフロントエンドとサーバーサイドの区分して作業します。実はこのように割り振って作業することはずいぶん前からのトレンドなんですが、私が遅い感じがありますね。私は最近までJavascriptとJqueryを使って画面とプログラムを作成しました。 プロジェクトを一人でやったことではないですが、この状況をそんなに悪いとは思わなかったんです。Jqueryでも十分にSPA(Single page application)を実装できるし、私の感じではJqueryでシステムが遅いとも思わなかったんです。 しかし、JqueryからReactに変わらなければならないと思ったことが、一つ目はライブラリがもうJqueryを依存しない、使わないことです。そうするとJ
![明月の開発ストーリ :: [Java] 64.Spring bootとReactを連結する方法(Buildする方法)](https://cdn-ak-scissors.b.st-hatena.com/image/square/ad74b907f9792fb7587ff0749651e71174dde266/height=288;version=1;width=512/https%3A%2F%2Fwww.nowonbun.com%2Fimg%2Fnowonbuntistory1.png)
Spring Bootとcreate-react-appを組み合わせて開発を行う - Qiita
以下の記事を参考に、Spring BootとReactを組み合わせて開発を行ってみます。 Using create-react-app with Spring Boot Spring InitializrからダウンロードしたSpring Bootの雛形をEclipseにimportします。 import > Maven > Existing Maven Projects でzipを解凍したファイルを指定すればOKです。 src/mainディレクトリに移動し、 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http
React デベロッパー向け Lit | Google Codelabs
Lit とは Lit は、任意のフレームワークで動作する高速で軽量なコンポーネントの開発に役立つ Google のオープンソース ライブラリで、共有可能なコンポーネントやアプリケーション、設計システムなどの構築に使用できます。 演習内容 以下について、React のコンセプトを Lit に変換する方法を学びます。 JSX とテンプレート コンポーネントとプロパティ 状態とライフサイクル フック 子 参照 状態の仲介 達成目標 この Codelab を完了すると、React コンポーネントのコンセプトを Lit の対応するコンポーネントに変換できるようになります。 必要なもの Chrome、Safari、Firefox、または Edge の最新バージョン。 HTML、CSS、JavaScript、Chrome DevTools に関する知識。 React に関する知識。 （上級者向け）最適な
Spring Boot + ReactでWebシステムを開発する方法 | うぇぶファン
Spring Boot + React（TypeScript）で簡単なWebシステムを開発してAWSにデプロイまでしたので、その方法を紹介します。 開発するシステム概要 今回は、簡易的なユーザー情報の管理システムを開発します。システムの概要は以下の通りです。 バックエンド プログラミング言語はJava、フレームワークはSpring Bootを使ってAPIを構築します。データベースは何でも良いですが、無料で提供されているPostgreSQLを使います。 データベースへの接続はMyBatis（マイバティス）というフレームワークを使います。MyBatisを経由してPostgreSQLにSQLの発行を行い、データの取得や更新を行います。 フロントエンド フロントエンドは、JavaScriptのライブラリであるReactを使います。また、型付けを行うためにTypeScriptを導入します。 そして、
React.js と Spring Data REST - 公式サンプルコード
このチュートリアルでは、Spring Data REST とその強力なバックエンド機能を使用し、React の洗練された機能と組み合わせて、わかりやすい UI を構築するアプリのコレクションを示します。(参考: JavaScript フロントエンドフレームワークの比較 [Qiita] ) Spring Data REST [YouTube] (英語) は、ハイパーメディアを使用したリポジトリをすばやく構築する方法を提供します。 React (英語) は、JavaScript での効率的で高速で使いやすいビューに対する Facebook のソリューションです。
ReactとVueの比較 | 完全に同じアプリのコードの書き方の違い - Qiita
はじめに JavaScript フロンエンドフレームワークは 2014 年ごろから本格的に使用され始め、従来のサーバーサイドテンプレートに対し、現代では一般的な Web 技術としてすっかり定着し、シェアとしては React、Vue が 2 強状態になっています。本稿では、最初に過去から現在の状況を俯瞰した後、React と Vue の関数コンポーネントを使用して、同じ画面と機能を持つコードの書き方を比較していきます。 過去から現在の状況 フロントエンド MVC の衰退 10 年前、フロントエンド MVC を標榜していた Angular や Ember は低迷し、以降のフレームワークはもはや M とか V とか MV なんたらなどのレイヤーを言及しなくなり、ビュー + イベント + ステートを 1 つの責務としてまとめた直感的で分かりやすいコンポーネント指向となりました。以下は State
Hilla 1.3 による Spring Boot と React のタイプセーフな通信
はじめに Hilla framework が v1.3 にて React に対応しました。誰かが触れている気配がないので記事にしてみました。 以下は公式のブログ記事です。 Hilla framework とは 以前、Hilla framework について以下の記事を書きました。 Hilla の最大の特徴は、TypeScript クライアントのコード自動生成により、BFF(Java)とフロントエンド(TypeScript)でタイプセーフな通信を実現している点です。 そして Vaadin 製の UI コンポーネントが提供されています。 v1.3 で React に対応 これまで Hilla のフロントエンドは、Lit という Web Components 用のフレームワークを利用していました。これが v1.3 で React 用の UI コンポーネントが提供され、React をベースとした開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Extend Create-React-App for Multi-Page Applications
React Server Side rendering with Java Spring Boot Using Thymeleaf
CRUD Application With React and Spring Boot | Baeldung
Run React Frontend and SpringBoot Backend on the same port and Package them as a single artifact !!
How to Automate Build Processes of React JS Front-end and Spring Boot Application
React
