Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ

こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向

東京Node学園祭2016で話したブッキングテーブルのやつ

株式会社FiNCで主催された「Frontend Meetup vol.1 - SPAを語り尽くす会!」に行ってきました。 テーマは「Single Page Application(SPA)」ということで、実際に業務でReactやAngularを使ってSPAを取り入れている方々の話を伺いました。スピーカーの方々が資料をあげてくれているので、細かい内容はそちらに任せて内容の抜粋と個人的な所感を記しておきます。 React/Reduxで半年くらい真面目にSPAするとわかること @takayuki_shmz (株式会社FiNC) 発表スライド ReactでSPAをやるときはコレに気をつけた方がいい 正しいコンポーネント思考 コンポーネントは、状態をもたない再利用性の高いDumpComponentと、それとactionなどをつなぐ為の状態をもつSmartComponentの意識をもつこと。とはいって

これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や

この翻訳について Airbnb React/JSX Style Guideの和訳です。 間違っていたり分かりにくい箇所があれば、ご指摘いただけると幸いです。 Airbnb React/JSX スタイルガイド このスタイルガイドは現在一般的に使用されている標準に基いていますが、場合によってはいくつかの慣例（async/awaitやstatic class fields）が含まれていたり禁止されていたりします。現在、このガイドにはステージ3より前のものは含まれておらず非推奨です。 目次 基本的なルール クラス vs React.createClass vs ステートレス ミックスイン 命名規則 宣言 アラインメント 引用符 空白 引数 参照 括弧 タグ メソッド 順序 isMounted 基本的なルール Reactコンポーネントは1ファイルに1つだけにしてください。 ただし、1ファイルに複数の

A slide for html5j #65 http://eventdots.jp/event/589181 2016/07/27: Updated about React.PureComponent

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

ReactでWebアプリケーションを作るとサーバサイドの感覚でスムーズに開発ができます。しかしそれでもUI、UX周りになると気にしなければならないことも多数あります。 その一つとして長大なリストがあります。大量のDOMを表示したりスクロールすると時間がかかってしまうものです。それを改善してくれるのがReact Virtualizedです。 React Virtualizedの使い方 デモの画面です。一覧表示のコンポーネントが並んでいます。 実際に使っているところです。大量のデータを一気に表示したり、スクロールや行を指定したジャンプができるようになっています。 React Virtualizedでは一行あたりの高さを変えたり、ソートすることもできます。様々な場面で使えそうなライブラリです。 React VirtualizedはReact/JavaScript製のオープンソース・ソフトウェア（

こんにちは。Sales Systemチームの金子です。Sales Systemチームでは、cybozu.com Store　や、販売管理システム等の開発をしています。 このエントリでは、cybozu.com 稼働状況のフロントエンドをReact/Reduxで作り直した話を書いていきます。「React/ReduxでWebアプリケーションを作ってみようと考えている人」を対象としています。 TOC 「cybozu.com 稼働状況」とは? 作り直した背景 技術概要 React/Fluxについて React/Redux Routing Resources Async Multilingualization/Localization ES6 Utility Lint Testing 取り組んでみた感想 まとめ 「cybozu.com 稼働状況」とは? クラウドサービスはサービスの稼働状況をステータス

IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.

I talked about Redux(https://github.com/rackt/redux) on React.js meetup #2, 8 Sep 2015.

You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If