react-routerではなくuniversal-routerでReact + ReduxのSSR + SPAする | nabeliwonote
react-routerがv4になったことで既存のアプリケーションが完全に壊れて困っちゃった人。いると思います。 まあでも頑張ればv4でも動くようにできるしv3からマイグレートする系記事もぽつぽつと出ているので、詰んでしまったりv3に居残り続けるみたいな選択にはならないと思いますが。 しかしそこは今後もドラスティックなメジャーバージョンアップを行うことが予想されるreact-routerなので、この際別のルーティングライブラリを選択してもいいのではないか、みたいな。 そういうモチベーションで今回の記事を書いてみました。 そしてこの記事ではreact-routerの代わりにuniversal-routerを使います。 universal-router is… universal-router 名前の通りUniversalなルーターです。クライアントでもサーバーでも動くよっていうあれ。 git
Building a Simple CRUD App with React + Redux: Part I
06 Sep 2016 on react | redux | webpack | npm | es6 Building a Simple CRUD App with React + Redux: Part I Intro This is Part I of a eight part series on building a CRUD application with React + Redux. You can view the code for this project here. You can view the table of contents here React for Embereños At the Flatiron school, we've been gearing up to teach students to build React applications--bu
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント
React/Redux/Node.jsのSSR/SPAを速くする6つのチューニングポイント：大規模ブログサイト表示速度改善 大解剖（終）（1/3 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。今回は、React/Redux/Node.jsを使ったIsomorphic JavaScript特有のパフォーマンスチューニング手法や実際にあった問題および、その解決方法について。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介しています。 アメブロのリニューアルでは、React/Reduxを採用し、サーバサイドとフロントエンド両方での
ゼロから始めるElectron - 2週目 「ReactとRedux」 - Qiita
はじめに Electronの学習を始めて2週目が過ぎましたので、情報をまとめたいと思います。 使う技術については、スクリプト言語をES2015(ES6)、フレームワークにReact、 Flux実装はReduxにしました。 理由は早くリッチな画面コンポーネントを使いたいからです。 今回のまとめは、ほとんどがReactとReduxになります。 ゼロからという割に、少し難しく感じるかもしれませんがよろしくお願いします。 今の理解を整理するために書いています。 どんな画面コンポーネントがあるかは下の図も参照ください。 これまでの記事 1．ゼロから始めるElectron - 1週目 サマリ Reactの使い方に慣れ、リッチなコンポーネントを使ってElectronアプリケーションをよりモダンにしようというテーマです。 レトロなElectronアプリケーションを前提知識の少ない状態からReact+Red
RailsエンジニアがReactを始めてSSRとReduxとTypeScriptを導入するまで | bitjourney Kibela
RailsエンジニアがReactを始めてSSRとReduxを導入するまで Roppongi.rb #3 "Rails x Frontend-Tech" 自己紹介 github.com/gfx BitJourneyでKibelaを開発 Speee, Inc. で技術顧問をしてる Reactは現職で初めて触った（2016年8月~） 今日の話 Kibelaのフロントエンドの話です。 読みはキベラ Markdownで書けて、フロー情報（Blog）とストック情報（Wiki）を区別して整理できる情報共有ツール これまでの話 新規Railsアプリに小さく導入するReact // Speaker Deck （dex1t, 2016/09/05） 小さく導入して学びながら開発を進める ⭕ Interactive UI componentをReactで＆jQueryも併用 ❌ viewをすべてReactで実装
React-Redux を試す - Qiita
http://redux.js.org/docs/basics/UsageWithReact.html のメモ とあるソースコードを読んでいて、redux という仕組みを理解しないと何が起こっているか分からないので、仕方なしに redux も入門してみる事にした。いつまでたっても本題にたどり着けず辛い。。。 環境の作成には create-react-app を作る。 Redux 用語 Action: 状態を変えるためのコマンド (コマンドパターン) Reducer: 古い State と Action から新しい State を作る関数 Store: action を受け取り Reducer を実行して State を返す。Store は reducer から作る。 store.dispatch(action) で store に action を送る。 createStore(reduc
React + Redux + Electronのプロジェクトを作成する。 - Qiita
前書き 前回、ReactのプロジェクトにReduxを導入する記事を作成しました。 今回では、そのプロジェクトをElectronを使ってデスクトップアプリ化する方法を記述します。 正直、前々回でやった「ReactのプロジェクトをElectron化する」で紹介した方法とほとんど似ています。 リポジトリ いつものReactTodoのリポジトリになります。 ブランチで分けていますので、差分等をみても参考になると思います！ react-todo-reduxが前回作成したReactTodoにReduxを導入したブランチ react-redux-electronが上記をElectron化したブランチになります。 ReactTodo 1. ディレクトリ変更 前々回でElectron化した時は、electronフォルダとreactフォルダを作成しました。 今回は、もっと分かりやすくディレクトリを変更します。
React・Reduxはじめました - 弥生開発者ブログ
こんにちは！ Misoca開発チームのめろたん(@renyamizuno_)です！ 暖かくなってきて眠いですね。 最近は、「0.8秒と衝撃。」というバンドが活動を終了するってことを聞いて、まじかーとなってます。 はい。 今回はMisocaでReactを使い始めたことについて書きたいと思います。 React 詳しく書かないですが、ReactはFacebookで作られたユーザインタフェースを構築するためのライブラリです。 github.com 仮想DOMでJS界隈を賑わせていましたね。 class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } ReactDOM.render( <HelloMessage name="John" />, docume
Electron+React+Reduxで作るレトロなエクスプローラのハンズオン(チュートリアル) - Qiita
はじめに 前提知識ゼロからReact、Redux、Electronの組み合わせでレトロなエクスプローラーを作って、その仕組みを知るハンズオンです。 プロジェクト作成から、モジュールのフォルダ構成の決定、実際のコードを書き、ビルドして実行するまでを長々と解説します。 目的 ReactやReduxって何？、Fluxとか敷居高そう、解説記事を読んでもよくわからないし、難しいアプリケーションやそのソースコードは重たい。 手っ取り早く動く簡単なサンプル作って動きや書き方を知りたい！という方に向けて作ったものです。 あらかじめお断りしますが、記事単体で完結させたいため長いです。しかしほとんどコードです。 解説は、今回の範囲だけで別の記事がたくさん書けそうなので、整理が終わってから（来週中には）作成したいと思います。 あいさつ 01、02、03は犠牲となったのだ。04以降の犠牲にな。 この記事を読んでで
React+Redux未経験者のプロジェクト受入 - Qiita
自己紹介 渡辺 貴明 EngFrontend follow me! アジアクエスト株式会社 フロントエンドエンジニア 今日の話 React未経験者が、 Reduxのプロジェクトにスムーズに参加するため 何をしたか？ 想定する状況 ソースはreact-redux-universal-hot-example を元に複雑にした感じ 大事 アーキテクチャはこんな感じ これから物量をこなす段階 新しく人を追加する ES5のjsはできるがReact触ったことない 必要なこと Reactを覚える必要がある Reduxも覚える必要がある BFFでのAPIの叩き方も覚える必要がある ES2015も覚える必要がある 問題 Reactだけ覚えても仕事に入れない 丁寧に覚える時間はない しかし、覚えないと渡せる仕事がない やったこと 専用のチュートリアル的なものを作成 最小構成のサンプルを作って真似して書いてもら
React Reduxファーストインプレッション - Islands in the byte stream
今更感ありますがReact Reduxを導入したの所感をメモしておきます。 github.com ざっとみてこれなら自分でも再実装できそうだなという印象 いままではreact-micro-container でfluxしてた cf. 小さいReactアプリケーションのためのライブラリ書いた - Qiita 新規Railsアプリに小さく導入するReact // Speaker Deck React Reduxにすると、個々のreact componentをfluxフレームワークに依存しない形で設計できる これに対して react-micro-container はcontainerに制御されることを意識した設計になる（＝containerとcomponentで設計が異なる） React ReduxなしでReactを初めてRect Reduxを導入するのは簡単だし、あとから別のflux実装にす
Electron + React + Redux - KAYAC engineers' blog
JSで書くデスクトップアプリが熱い Electron 熱いです。 Atom を始め、Qiita の Kobito や Slack など、 十分に実用できるアプリケーションが登場しはじめています。 なにかと話題のRPGツクールMVは、NW.js（旧node-webkit）ですが、これもJSで書かれていますね。 NW.js は、その他、女の子といちゃこらする系のゲームでも使われています。 JS でデスクトップアプリを書いて、うん千万売り上げるのも、もはや絵空事ではありません。 今回は、Electron と Redux、React の組み合わせで、 デスクトップアプリを作るまでの、簡単なチュートリアルを書きます。 登場人物紹介 Electron Github が開発してる、JS でデスクトップアプリが書けるすごいやつ NW.js より活発そうですごい React Facebook 製のすごいやつ
React + FLUX + Redux + Redux Saga のお話
2022年5月18日 【iCARE Dev Meetup #33】 デザイナー目線のユーザーとの向き合い方 でのスライドです。ユーザーインタビューをするとき、私たちはつねに「認知バイアス」にさられています。認知バイアスの影響を受けると、私たち自分に都合のよい情報ばかりピックアップしてしまいます。ユーザーにしっかり寄り添ったプロダクトをつくるためには、きちんとバランスのよいユーザーインタビューをする必要があります。本セッションでは、陥りがちな認知バイアスをミニワークを交えて体験し、ユーザーインタビューで気をつけるべきポイントを解説します。 なお、今日の登壇を誘ってくださった @murokaco さんが熱心な研究員（BiS というアイドルのファン）なので、 BiS（第3期）のデビュー曲「BiS -どうやらゾンビのおでまし-」をタイトルに入れてプレゼンしています。
React+Redux+Express+MongoDBでものすごくシンプルなCRUDアプリをつくる - Qiita
概要 React+Redux+Express+MongoDBでCRUDアプリを作ります。 この記事の目的は、React/Reduxを触り始めた人が サーバーとの通信の方法（より一般的には非同期処理の方法） Reduxにおけるフォームの扱い ExpressによるAPI node.jsからのMongoDBの操作 Herokuへのデプロイ など、主にサーバー側のデータの操作に関わる基本的な事項を学ぶきっかけを作ることです。 この目的に集中するために、それ以外の点については一切気にしないことにします。 そのため、初心者以外の人（上記の内容を理解している人）がこの記事を読んでも得るものはないと思います。 この記事が書かれた背景には、少し前に自分自身がjavascriptによるフロントエンド開発からwebプログラミングを学び始めたころの経験があります。ReactやReduxの基本的な文法の理解を終えて
Universal React and Redux
This is an example to help me put together a Universal JavaScript example using React, Redux and Typescript. Table of contents Table of contents 1. Adding React, Typescript, Linting and Webpack Create a new project Typescript Linting Webpack React Test the setup 2. Adding Webpack Dev Server Test the setup 3. Adding Testing and Coverage Testing Coverage 4. Add client-side Routing Create views Add L
TypeScript, React and Redux - Matt Greer
Try as I might, I could not get TypeScript and Redux to play nice. I finally pulled it off with a little surgery, and thought I’d dump what I did. If anyone has a better approach, please I’m all ears Setting Up Your Actions Somewhere in a Redux GitHub issue I found someone who took the approach of using redux-actions. I liked this approach so I adopted it. For starters, define an Action<T> interfa
React and Redux Sagas Authentication App Tutorial
Overview In this Tutorial series we're going to take a deep, PRACTICAL guide into using some of the most popular and yet under explained React tools: Redux Redux Saga Redux Form React Router It's not necessarily that any of these are difficult to use, but wiring them together and making something beyond the trivial "hello world" apps can be a maze. Half the time it's just due to the lack of practi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How Redux works
GitHub - tvrbo-pro/TvrboReact: Dream starter project: React, Redux, React Router, Webpack
GitHub - piotrwitek/utility-types: Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).
