React AJAX Best Practices
When you start asking about AJAX and React, the first thing the experts will tell you is that React is a view library and React has no networking/AJAX features. It's good to know, but not very helpful when you just want to get data from the server into your React components. The truth is, there are a ton of ways to do it. You probably have thought of a couple ways yourself, but if you choose the w
react + redux + react-router のサーバサイドレンダリングを試してみた
こんにちは、ジャバスクリプターの三宅です。 react + redux + react-router を用いたアプリケーションのサーバサイドレンダリングの情報が見当たらなかったので試してみました。 React はご存知の通り、Facebookが開発を行っている、JavaScript フレームワークです。 React は View 部分のみのフレームワークとなり、フロントエンドアプリケーション全体は別途考える必要があります。 Facebook は Flux というアーキテクチャを提唱しており、Redux はその実装となります。 React Router は、React アプリケーションでルーティングを行うためのライブラリでです。 react や redux、react-router の基本的な使い方は、公式ドキュメントや様々なブログで紹介されているので今回は、サーバサイドレンダリングの部分に
Container Components
One React pattern that’s had the impact on my code is the container component pattern. In Jason Bonta talk High Performance Components, there’s this little gem about container components. The idea is simple: A container does data fetching and then renders its corresponding sub-component. That’s it. “Corresponding” meaning a component that shares the same name: StockWidgetContainer => StockWidget T
How to programmatically navigate using React Router?
UPDATE: 2022: React Router v6.6.1 with useNavigate The useHistory() hook is now deprecated. If you are using React Router 6, the proper way to navigate programmatically is as follows: import { useNavigate } from "react-router-dom"; function HomeButton() { const navigate = useNavigate(); function handleClick() { navigate("/home"); } return ( <button type="button" onClick={handleClick}> Go home </bu
reduxを試してみた(5日目) - ajaxを使ってUIを構築する(reduxにおける非同期の制御) - Qiita
このページは作業ログです。やったことをつらつら書くだけなのでまとめません。あしからず。 対象読者 主に自分 今日のゴール jQueryではない方法を使ってajaxを使えるようになっていること Reactのコンポーネントを非同期リクエストで構築できるようになっていること モチベーション React.jsはビューのみをサポートしたライブラリ。サーバーとの通信部分はなんも用意していない チュートリアルではjQueryを使ってサーバーと通信してた。でもjQueryはその他もろもろいろいろ機能がある。Virtual DOMとの相性がありそうなので、jQuery自体導入せずに済ませられるのならそうしたい。 調べてみた A Comparison of JavaScript HTTP Libraries for the Browserという記事によると、Ajaxリクエストを実現するには下記の方法がある。
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
React・Reduxを使ったElectronアプリのboilerplateを作ってみました - DJ lemon-Sour's diary (prod.hisasann)
hisasann/electron-react-redux-boilerplate はじめに Node.js + Babel 6 + React + Redux + Webpack + Gulp + Electron Electronを母体として、React・Reduxを使ったフロントエンドのアーキテクチャについて試したことをメモメモ Webpackはbrowserifyとしか使っていません Electron 最近はやりのElectron（MacやWindowsのアプリ化）を使った場合の開発の仕方や、どうやるのが効率的かを少しずつメモしていきます 現時点では、Electronでビルドしたアプリのリリースやアップデートに関しては未調査になります Livereload まずは Livereload これがないとはじまりません 以下の記事を参考に、gulpのタスクを作ってみました ぼくのかんがえ
React + Redux + TypeScript でWebアプリを作った感想・勉強法と Angular との比較 - Qiita
作ったもの 成果物は Alcatraz を便利に検索する Alcatraz Search という web アプリを開発しました を参照ください。 ソースコードは starhoshi/AlcatrazSearch にあり、 GitHub Pages で公開 されています。 今回作るためにした勉強や開発の感想、 React と Angular の比較などをつらつら書いていきます。 多少なりともフロントの心得がある人向けで、あまり説明的ではない内容です。 フロントエンド開発経験 2015年7月くらいから業務で Angular, TypeScript, Browserify, gulp やらで Cordova 製のスマホアプリを開発。 半年ちょいのニワカです。 AlcatrazSearch は仕事終わりと土日に開発して 1 ヶ月かかった。 勉強のための開発なので、期間は目安といった感じ。 あと業務
reduxを試してみた(4日目) - redux-react-routerを試す - Qiita
React.jsと組み合わせるfluxのライブラリreduxを試してみた。 このページは作業ログです。やったことをつらつら書くだけなのでまとめません。あしからず。 対象読者 主に自分 今日のゴール redux-react-routerを使ってページ切り替えを実現する redux-react-routerとは？ Reactのラウター(ルーターではない)ライブラリとしてよくreact-routerが使われる。react-routerの機能は十分だが、現在表示しているページという"状態"がアプリケーションに登場する。これもできればstoreに押し込めたい。ということで登場したライブラリ。react-routerをベースにしたライブラリなので、まずreact-routerから見ていく。 react-routerの特徴 ドキュメントの構造とURLの構造をマッピングするライブラリ。最初ドキュメントを読
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト