React Server Componentsに感じたフロントエンドの消失
はじめに 新年早々に面白そうな記事を見つけました。ReactでのAPI呼出しを最適化するために「部分的にサーバサイドで実行するコンポーネントを作る」というもののようです。 あるいは去年の記事ですが気になってたものとしてBlitz.jsでReactベースのFWであるnext.jsに永続化層を持たせてRailsのようなFWにしようというアプローチもあります。 どちらの記事も書かれてる内容自体は分かる気がするものの 「それをフロントエンドでやる意味あるの？」 というのが拭えずイマイチ腑に落ちなかったんですが、単純に 「私と最前線でやられてる方々で期待してるものがたぶん違う」 という気がしてきたので、その辺を整理のために書いてみます。 注意書き Vue.js/Nuxt.jsは少し触ったことがありますが、React Server ComponentsやBlitz.jsを触ったことは無いです 「なんで
モダンJavaScriptを基礎からしっかり学びたい人、Reactを身につけたい人に最高の入門書 -React実践の教科書
モダンJavaScriptの基本からTypeScriptの実践的な内容まで、Reactを一から学び、しっかりと身につけたい人にお勧めの解説書を紹介します。 Reactを身につける上で、これだけは知っておいた方がよいというJavaScriptの知識も分かりやすく解説されており、基礎からしっかり身につきます。 本書はUdemyのReactコースで最高評価を獲得し、ベストセラーでもある著者がモダンJavaScriptの基本からTypeScriptの実務で役立つ内容まで詳しく解説した解説書です。著者が開催している勉強会で初学者がReactのつまづきやすい挫折ポイントをやさしく、分かりやすく導いてくれる解説書です。 発売して間もないですが、Amazonでは早くも高評価がたくさんついています。
2018 年 React と Redux のエコシステム総まとめ - Qiita
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
React v16.0 – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size. New render return types: fragments and strings You can now return an
Relicensing React, Jest, Flow, and Immutable.js
Next week, we are going to relicense our open source projects React, Jest, Flow, and Immutable.js under the MIT license. We’re relicensing these projects because React is the foundation of a broad ecosystem of open source software for the web, and we don’t want to hold back forward progress for nontechnical reasons. This decision comes after several weeks of disappointment and uncertainty for our
react-router@v4 を調査した - あいつの日誌β
あらすじ react-router@v4 にしたら色々な変更が入っていて全く動かなくなったので react-router の機能を確認しました。 追記: 2017-03-23 16:30 withRouter について追記しました。 言及すること <Route> の挙動が v3 と異なる <Switch> と <Route exact ...> の挙動を理解して対処しましょう browserHistory.push から `this.props.history.push へ変わった <NavLink> が追加されました Nested Routes が廃止された？ withRouter 準備 create-react-app practice-react-router4 && cd $_ npm install --save react-router-dom <Route> 最初に src/
ReactのRedux非同期処理がサルでも分かる超解説 - ベルリンのITスタートアップで働くジャバ・ザ・ハットリの日記
この記事はかつての私と同じように「Reduxを使った非同期処理がいまいち分かんねー」という方に向けて書いた。とりあえずはReactの公式サイト、Reduxの公式サイト、Dan氏のReduxビデオ解説を観たが、なんかスッキリしない。特にReduxの非同期処理が分からない、という方向けの超シンプル解説。 Reactは公式サイトのチュートリアルなんかも充実していて丁寧だし分かりやすかった。しかしReduxは違う。特に公式サイトの非同期処理の例が変にややこしい。 こういうことをブログで書くと「アタシは公式サイトの説明を読んでも分からないバカです」と言ってるみたいだから、恥ずかしいしあまり書かれない。ウザいぐらいに「Reduxは素晴らしい。シンプル。カンタン」という発言がネット上にあふれている。 しかし私の頭ではパっと分からなかった。私以外でも「これ難しいなー」と思ってる人が居るんじゃないだろうか。
react-router v4 のログイン処理 - Qiita
経緯 最近react、reduxでwebアプリケーションを作る機会があり、どうせなら新しいものを使おうとreact-routerのversion4を使いました。 versionが上がるたびに大きく内容が変わるreact-routerで最近でたversionということもあり日本語のドキュメントが少なかったので自分へのメモの意味を込めて投稿しました。 react、reduxを触るのが今回初の初心者なので間違っている箇所があれば指摘をお願いします。 実装 react-routerはv4になってpackagingが変わりました。 詳細は下記を参照してください。 https://github.com/ReactTraining/react-router 今回はwebなのでreact-router-domを使用します。 import { BrowserRouter, Route, Switch } f
http://minotaur.badwitch.io/react-webpack-boilerplate/
See related links to what you are looking for.
Webpack + React + ES6の最小構成を考えてみる。 - 文系プログラマー
Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + Browserifyを用いた環境ビルド uraway.hatenablog.com React Tutorial uraway.hatenablog.com プロジェクトセットアップ $ npm init インストール webpackとreactをまずはインストール。 dev serverのグローバルインストールにはsudoコマンドが必要かも。 $ npm install --save react react-dom $ npm install -
webpackでes6+React+Redux+Sassの環境を構築してみる(sourceMap,uglify,minimizeも) - Qiita
- webpack-sample - asset (npm runを実行するフォルダ) - js (コンパイル元のjs) + app.js + sub.js - sass (コンパイル元のsass) + app.scss + sub.scss + package.json + webpack.config.js (開発用のconfig) + webpack.production.config.js (本番用のconfig) + js (jsのコンパイル先のフォルダ) + css (sassのコンパイル先のフォルダ) webpack.config.jsの内容ですが、 開発用はjsのsourceMap、uglifyはしていません。（watchしたときに遅くなったため）本番用はしてます。 sassは開発用、本番用ともにsourceMap、minimizeをしてます。 そこらへんは必要に応じて。
Reactで react-dropzone と axiosを使ってファイルアップロードを実装（バックエンドはRails）
アップロード画面実装 一気に貼り付けちゃいましたので、ざっと説明しておきます。 DropZone タグで、ドラッグドロップでファイルをアップロードできる機能が できちゃいます。acceptプロパティで受け付ける画像の種類（ファイルの種類）を指定し、 onDropでドラッグドロップされた時の処理を実装します。 今回はonDropで受付可能なファイル、不可能なファイルを引数で受け取り、 ステートを変えて、ドロップ領域の右側にそれらのファイル名を列挙します。 と同時に、画面下部に受付可能なファイルのプレビューを表示しちゃいます。 これがいとも簡単なんです。びっくりですよ。 アップロードボタンがクリックされたら、FormData オブジェクトを作り、 そこにアップロード対象のファイルを詰め込んで、axiosでPOSTします。 たったこれだけなんですよ、ホント便利ですね。 何個のファイルがアップロー
ES5のReact.jsソースをES6ベースに書き換える - Qiita
概要 開発者にとってはメリットがありそうだけどユーザーにとってはいまいちメリットがよく分からないES6。ひとまずどのくらい開発者にとってメリットがあるのかを実際に把握するため、ES5のReact.jsソースをES6ベースに書き換えてみました。 対象のソースは、投稿[react-router v2.xとcontext]のサンプルソース（https://github.com/kunitak/react-router-1to2）です。 参考 React TutorialをES6で書きなおしてみた - console.blog(self); http://sadah.hatenablog.com/entry/2015/08/03/085828 Babelで理解するEcmaScript6の import / export http://qiita.com/inuscript/items/41168a
Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法 - Qiita
注意 これは 8 no-Flux strategies for React component communication を意訳し、自分の解釈や補足を追加した記事になります。 実際に自分が React でコードを書いていて、疑問に思い調べた際に参考にしました（結局は Flux/Redux と 方法1. Props を使ったのですが）。 はじめに React で、最初の大きな問題の1つは「コンポーネントはどうやって他のコンポーネントとコミュニケーションするべきか」という事です。 コンポーネント2がクリックされた事をコンポーネント1に伝える最も良い方法は何でしょうか？ これには、とてもたくさんの答えがあります。早かれ遅かれ、Flux が言及されるでしょう。 Flux アーキテクチャでコミュニケーション問題を解決できるでしょうか？Flux は必要でしょうか？ この問題は Flux を使用するこ
今からはじめるReact.js〜画面遷移〜 - Qiita
※(2016/01/19)react-routerのバージョンは1.xを前提にしています。 ※(2016/02/18)2.xネタはこちら なんらかのサービスを作成した場合、製品カテゴリーごとに画面が存在するとか、メインの画面とは別にに設定画面があるとか、会員制サイトであればログイン画面があって、ログインしたら、ポータル画面に遷移したり、といったように、複数の画面が存在して、それらの画面に行き来できる仕掛けが必要になってきます。 react-routerというライブラリは画面遷移を管理してくれるライブラリです。 インストール npm install react-router --save npmのバージョンが3以上の場合は、historyもインストールします。 npm install history --save react-routerとhistoryはバージョンの対応関係があるため、 n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MUI: The React component library you always wanted
Elemental UI
DeNA Engineering - DeNAエンジニアのポータルサイト
A Simple React Router v4 Tutorial