React 17の新機能「Suspense」の仕組み Timeout付き非同期処理が可能に - ログミーTech
2018年6月19日、第69回となる「HTML5とか勉強会」が開催されました。今回のテーマは「UIフレームワーク最前線」。Angular、Vue.js、Reactという3つのフレームワークにおける第一人者が一同に集い、それぞれの最新動向やおすすめポイントを語ります。「Suspense」に登場したのは、koba04氏。React 17より追加される新機能「Suspense」を、デモを交えつつ解説しました。 Suspenseとは何か？koba04氏：よろしくお願いします。「Suspense」というタイトルで話していきたいと思います。Suspenseを聞いたことがある方はどれぐらいいますか？ （会場挙手） 数人ぐらいですね。ありがとうございます。 最初に自己紹介をさせていただきます。「koba04」というアカウントでやっています。 今はサイボウズで働いていて、フロントエンド周りいろいろやっていま
React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜
React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか
TypeScriptを使ってReactのチュートリアルを進めると捗るかなと思った(実際捗る) - Qiita
この記事を書いたのは2016年のことでした。それから２年。 いつの間にか日本語チュートリアルが消えたし、結構未だにいいねを押してくださるので更新することにしました。(2018/2/2) reactの本家ドキュメントが日本語化されたため更新します。 (2019/4/11) はじめに タイトルみたいなことを考えていました。 実際補完が効くのはかなり有効でしたが、チュートリアル通りにいかない点が多々出ました。 結局色んな所を見るはめになりました でも総合してTypeScriptに向いているフレームワークだと思ったので詰まったところと解決方法を纏めてみることにしました TypeScript自体も学習コストが凄く低くて(ES2015 + 型)素敵だったのでいいと思いました。 追加で使うツール類 なし 今なら以下で試せます。 stackblitz オンライン版VisualStudioCode的な(コー
ReactとReduxを結ぶパッケージ「react-redux」についてconnectの実装パターンを試す - Qiita
Redux Advent Calendar 2016 23日目 初めてAdvent Calendarに参加させていただきます。 当初はReduxとcreate-react-appを使って、サクッと素振りできる環境構築手順をまとめようと思ったのですが、ここ最近で自分が一番悩んだ「react-redux」についてReduxを始める方へ同じドツボにはまらないようにという願いを込めて投稿させていただきました。 react-reduxとは？ react-redux公式より引用 Official React bindings for Redux. Performant and flexible. React公式のReactとReduxをバインディングするライブラリ パフォーマンスと柔軟性があります ここで出て来る「柔軟性(flexible)」というのがこのライブラリが初見殺しと言われる所以となっており
TypeScript JSX + ReactでReduxな画面遷移のある簡単なTODOアプリを作ってみました - かずきのBlog@hatena
はじめに Reduxをちょっとやり始めたので、無理やりですが画面遷移（react-router）を含めたTODOアプリサンプルを作ってみたいと思います。 やりながら書くので、最終結果がダメでしたというオチになってるかもしれない点ご了承ください。 プロジェクトの作成 Reactのひな型のプロジェクトを作成します。 プロジェクトの作成はここを参照 追加で以下の項目をnpm install --saveとtsd installでインストールします。 redux react-redux object-assign react-router history TypeScriptの型定義ファイルをプロジェクトに追加しておきます。 Modelの作成 まず、TODOアプリのデータをデザインします。 データの入れ物としては、TODOの1項目と、それのリストを管理するクラスの2つを用意します。 models.
cloud9環境でReactの検証① -導入- - Qiita
2016/9/17 関連記事情報を追加しました。 2016/12/3 新しい環境構築手順を掲載しました。参照 React.jsを手っ取り早く体験するために、cloud9を利用しようという試みです。 ※勉強しながらの執筆のため、多々至らない点があるかと思いますのでご了承ください。 最近React.jsについてはよく話題に上がるので、避けることができない時代の波が来ているのかもしれませんねぇ。。 cloud9でReact.js検証用のworkspaceを作成 まず、cloud9のページにアクセスし、自身のアカウントでログインする。次に「Create a new workspace」をクリックします。 作成画面では、下記の例のように好みのWorkspace名を記載します。「Public」を選択するとインターネット上に公開されてしまいますので、公開せずに使用したい場合は「Private」を選択しま
A library for building cross-platform apps - ReactXP
Building on React ReactXP builds on the popular React JS and React Native frameworks. XP means X-Platform Share most of your code between the web, iOS, Android, and Windows. Apps Users Will Love Create great-looking, responsive web pages and mobile apps that feel native. The authors of React use the phrase “learn once, write anywhere”. With React and React Native, your web app can share most its l
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
Frontend Meetup vol.1 で革命と秩序とSPAという発表をしてきた - Please Drive Faster
FiNCさん主催のFrontend Meetupというイベントで革命と秩序とSPAという発表をしてきた。 connpass.com 有志の方がまとめを書いてくださっているので、そちらもぜひ。 www.chirashiura.com qiita.com 僕の発表資料はこちら。 speakerdeck.com 主催のFiNCさん、ありがとうございました。 内容 フロントエンドのパラダイムシフトとfreeeの関わり方と、今のスタックであるReact + FluxUtils + Frowtypeについてのお話。 どちらかといえば後半のFlowtypeの適用についての方に力を入れてお話しした。 個人的な感覚もあるけど、Flowtypeはここ1年で大分扱いやすくなっている。当初はReactのAPIの型定義が揃っていなかったりしたけど、現状では型定義のないAPIは見当たらない。 意味のわからないエラーに
FluxとDDDの統合方法 - かとじゅんの技術日誌
おはこんばんにちは、かとじゅんです。 久しぶりにブログを書く…。最近、趣味でAngular2やらReactやらやっています。やっとWebpackになれました…。 さて、今回のお題は「FluxとDDDの統合方法」について。Angular2を先に触っていましたが、FluxといえばやはりReactだろうということで途中で浮気してReactで考えています。Angular2でもできるはずですが、今回はReactで統合方法*1について考えてみたいと思います。一つ断っておくと、FluxはDDDと統合することを想定していない設計パターンなんで云々とかはここでは考えていません。それはこのブログ記事を読む読まないに関わらずご自身で判断されてください。ソースコードについては、Githubへのリンクを一番下に書いてあるので興味がある人は参考にしてみてください。 Fluxって何？ まず基礎ということで、Flux i
TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed - console.lealog();
そもそものところで色々ツッコミたい気持ちはみなさんあるでしょうが、せっかく当選したので観戦に行ってきました。 React陣営は @koba04 & @yosuke_furukawa Angular陣営は @laco0416 & @armorik83 モデレータは @Shumpei メモは雑なので、漏れとか齟齬とかあるかもですよ。 トークバトル React / Angular 2の概要 スター数とかバージョンとか コードがだいたいこんな感じとか 開発言語 こば: だいたいBabel、TypeScriptでもやれる 会長: だいたいBabel使ってると幸せになれる らこ: JavaScript or TypeScript or Dart らこ: まあTypeScriptですよね らこ: Dartはリポジトリが分かれました はち: ReactやるからAngularやるからで開発言語を選ぶのはナン
ReactでTDD（テスト駆動開発）を始めよう : 環境構築からテスト作成、機能実装までの詳解ガイド | POSTD
最小限の設定のTDD手法を使い、「何をテストすべきか？」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。それでも、コンポーネントをどうテストするのが最善なのか、よく分からないかもしれません。どこから始めるのでしょう。具体的には何をテストすればよいのでしょうか。 いくつかのReactコンポーネントは簡潔過ぎて、そもそもテストが必要なのかすらはっきりしません。 AngularからReactに乗り換えた 人なら、テストには愛憎のような思いがあるかもしれません。 確かに Angular にはテストを支援するツールがたくさんありますが、同時にテストを書くのが難しくなる可能性があります。冗長ながら省略できない定型コードが多々ある上、 $digest の呼び出
DDD + Flux?
READY FOR THE BATTLE? -Introduction to Live Coding-
5分で理解する React.js - Qiita
いまさらですがReact（react.js）をはじめてみました。 Virtual DOMばかりが話題にあがるReactですが、それにとらわれていると理解が進まない、と言うかReactで理解しなければならないのはVirtual DOMではないことがわかりました。 Reactについての良い資料はすでにたくさんありますので、末尾に参考資料としてあげています。 このエントリは自分がReactのチュートリアルをなぞりながら書いた自分用のメモですが「1エントリで概要をちゃちゃっと理解したい」という方に役に立ったら良いな、とも思っています。 Reactチュートリアル http://facebook.github.io/react/docs/tutorial.html 基本 JavaScriptで書かれたライブラリ。react.jsをインクルードして使う。 （MVCで言うところの）Viewのみを担当する。
React.js と Validation - fukajun - 僕はvimで行きます -
概要 react.js + redux でクライアントサイドバリデーション + サーバーサイドバリデーションの結果表示について模索してる 最初は、form系のライブラリで良さそうないのか調べてた ライブラリみてしっくり来なかったのでそもそもfluxアーキテクチャのどこでやるのがやりやすいのか？考えてみた 背景 React.jsでフォームに入力された値のチェックを行うような Validation処理ってどうやって作るのがいいんだろう？というところ から調べ始めた.... 最初は、いきなりredux + React.jsでバリデーション処理を作るれるように いろいろ調べてたんだけどReact.js単体でもどうしていいのかわからなかった のでひとまずreact.jsとライブラリを組み合わせて、どうやるのが良いのか 調べた reactでのformをvalidateするライブラリなど ざっと下記のよ
今からはじめるReact.js〜画面遷移〜 - Qiita
前回→今からはじめるReact.js〜サーバーとの通信〜 react-router ※(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 --sa
業務アプリでReact.jsを使ってみた話 - Qiita
はじめに React.jsを使って業務アプリをSPAで作ってみたので、知見というか体験談を共有したいと思う。なお、業務アプリという分野におけるReact.jsの利用に関しては、React.js Advent Calendar 2015に「業務系アプリの実装だからこそReact使おうぜ」 という記事もあるのでそちらも合わせて読んでおこう。 アプリケーションの特徴 業務アプリといっても色々あると思うが、今回のアプリケーションでは以下のような特徴があった。 Formによる入力項目が多い＆バリデーション 画面遷移がかっちり(遷移途中の画面にいきなりアクセスや戻ることは不可) アクセスコントロールがある CRUD操作が多い 表形式でデータを表示 IEをサポート 以下、それぞれについて詳細を書いていく。 Formによる入力項目が多い＆バリデーション 業務アプリといえばFormの入力項目の多い、というイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://post.simplie.jp/posts/81
革命と秩序とSPA
React-Bootstrap
