TechCrunch | Startup and Technology NewsFeaturing Prime Minister of Greece & top Euro tech voices!
React基礎 · GitBook
React基礎 レッスン Lesson 01: 環境構築 Lesson 02: ES2015について Lesson 03: 関数型の書き方 Lesson 04: 初めてのコンポーネント Lesson 05: 初めてのinline style Lesson 06: 初めてのprops Lesson 07: 配列からの展開 Lesson 08: フォームの定義 Lesson 09: フォームによるデータ追加 Lesson 10: 総合課題「目的特化型電卓を作ってみよう」 おまけ Appendix 01: 様々なコンポーネントの書き方 Appendix 02: コンポーネントのstate Appendix 03: コンポーネントのライフサイクルメソッド Appendix 04: JSX vs. createElement Appendix 05: PropTypes Appendix 06: p
GitHub Contributions Graphの作り方（ロジック成分多め） - Qiita
↑のGitHubのContributions Graph(GCG)のようなヒートマップカレンダーを出力するReactコンポーネントのnpmモジュールを作ってみました。 使い方なんかはREADMEを見ていただければいいんですが、この記事ではコアのロジック部分を解説してみます。特にReactは関係ないので、他言語や他ライブラリでも実装できると思います。 ちなみにGCGは svg を使っていますが、react-heat-calendarは table タグを使っています。 きっかけ （この節はポエムなのでスキップ推奨です） 2017年1月初旬にJSer.infoのダッシュボードが公開されました。興味深く見ていたのですが、ビジュアル的にちょっと寂しいなーと思い、ヒートマップカレンダーを表示するようにコントリビュートしようと思いつきました。 で最初はダッシュボードのレポジトリ内に実装していたのですが
【Electron + react + flowtype】TweetDeckライクなpixivクライアントPixivDeckをつくった - Qiita
electron + react + flowtype + styled-components + webpackでpixivのデスクトップアプリを書いた。 前半にアプリについて、後半に技術的なことを書くので、どんな技術を使ったかのみ知りたい人は前半飛ばしてください。 GitHub - akameco/PixivDeck: TweetDeck like pixiv client for desktop ダウンロードページ スクリーンショット TweetDeckライクなpixivイラストビューア スクロール(IntersectionObserverで画像の遅延読み込み) カラムの移動(react-sortable-pane bokuwebさんに感謝) タグをクリックで新しいカラムの追加 Lightbox ドロワー その他機能 検索+◯◯users入りを自動表示 履歴機能 コンテキストメニュー
react-dnd これだけ抑えておけばおｋ - Qiita
巷で難しい難しいと言われていた react-dnd でドラッグアンドドロップを実装してみたところ、案外楽だったのでまとめる。 用語整理 DragSource : マウスで掴んでドラッグする対象 DropTarget : ドロップ対象 monitor : drop/hover時に今現在のイベント対象の状態を取り出せるもの 使い方 @DragDropContext を ドラッグアンドドロップしたい領域のコンポーネントに注入する @DropTarget を落としたい先のコンポーネントに注入する @DragSource をドラッグさせたいコンポーネントに注入する たとえばドラッグアンドドロップでリストの要素を入れ替えたい場合、 リスト全体が DragDropContext で、 リスト要素が DragSource かつ DropTarget になる。 実装例 並び替えられるリスト要素の実装 @Dr
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
https://www.prakard.com/viewtopic.php?f=1004&t=1884764
115 E Elm Ave Monroe, MI 48162 General: 734 243 0576 Sales: 800 826 2760 Award winning terminal emulation for WindowsConnect using Serial, Modem, or TCP/IP NetworksUpdated for compability with Windows 10, 8, 7, and moreSupports many terminal emulation and file transfer optionsActively supported & easy to use VersatileTerminal emulation programs with the versatility to communicate with a wide varie
React使い必見！ Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
りだっくすさが(redux-saga)に入門する - wadackel.me
Web アプリを構築したくて久し振りに React を触ってみると、前に少し触っていたのにすっかり忘れてしまっていました。圧倒的に記憶力が低いので、継続的に触っていないと中々覚えられません…。 今だと Angular2 がグイグイ来てたりしてますが、それよりも一度触ったことのある React+Redux を使った方が学習コストを抑えられるな、という訳で再度勉強中です。 改めて色々と調べていると、redux-sagaという Redux の Middleware が非同期処理を書きやすく出来るぞ！との事だったので、まずはシンプルなカウンターサンプルの実装をして感じを掴んでいきたいと思います。 最後の 参考 にもあげていますが、そもそも redux-saga とは一体何者なんだ？というところにおいて、以下の記事が大変参考になりました。 redux-saga で非同期処理と戦う - Qiita ま
Reactの考え方 | React 0.13 日本語リファレンス | js STUDIO
これは、元はReactの公式ブログへ投稿されたものです。 個人的な見解になりますが、ReactはJavaScriptを使用した大規模で高速なWebアプリケーションを開発する、 最も優れた方法であると考えています。 これは、FacebookとInstagramにおいて、我々にとって良い結果をもたらしてくれています。 Reactの優れた点の1つに、アプリケーションの構築を、どのように考えさせるかという事が挙げられます。 このページでは、Reactを使用した検索可能な商品データのテーブルを構築する過程を通して、学んでいきます。 まずは、モック作りから ステップ1: UIをコンポーネント階層に分割 ステップ2: Reactの静的版の構築 ステップ3: UIステートの必要最小限構成 ステップ4: ステートを使用するべき場所の特定 ステップ5: 別(逆)データフローの追加 最後に まずは、モック作りか
React + Reduxでテック系Podcastをピックアップして聴けるwebサービス、pickfmを作った - 理科メロンパン
https://pickfm.net pickfmとは テック系Podcastにでてくる話題を可視化し、好きな箇所をピックアップして聴けるwebサービスです。 下の画像はwada.fm Episode 52の話題を表示した様子です。このように、タイムライン状に表示された話題から聴きたい箇所をピックアップして再生することができます。 これをどう実現しているかというと、ディープラーニングを用いて音声認識をしてうんぬんとかそんなことは１ミリもありません。 Podcastを聞きながら内容をふせんに書き出す それをスプレッドシートに起こす スプレッドシートをcsvにエクスポートする csvをスクリプトでElasticSearchに投入 このように非常にローテクな残念仕様となっております。 作った動機 「あの話、また聴きたいな」と思っても探しだすのが困難で、あっちこっちと這いずり回らないといけないのを
React+FluxでTodoMVCを作ってFluxについて学んでみた - yutaponのブログ
ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが React入門用に簡単なアプリケーション作ってみる - yutaponのブログ 今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。 構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。 参考にしたコードはfacebook/fluxのexamplesのコードになります。 flux/examples/flux-todomvc at master · facebook/flux · GitHub https://github.com/facebook/flux/tree/master/examples/flux-chat 作ったコードはここに置いていて、 https://github.com/sskyu/react-flux-todomvc-example/tree
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
10分で実装するFlux
10分で実装するFlux 自己紹介 azu @azu_re Web scratch, JSer.info Flux /flˈʌks/ Fluxとは Facebookが提唱したSmalltalk MVCの焼き直し CQRS(Command Query Responsibility Segregation)と類似 データが一方通行へ流れるようにするアーキテクチャ ウェブUIについてそれを適応する 今日の目的 小さなFluxの実装を作りながらFluxついて学ぶ Fluxの特徴: Unidirectional data flow 本当にデータが一方通行に流れるのかを確認する Fluxでよく見る図 登場人物 何か色々いる Action Creators, Dispatcher, Store, React Views... Dispatcher = EventEmitterと今回は考える もっと実装的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactで学ぶ！いまどきのWeb開発
VulcanJS
React + TypeScript + Webpackの最小構成 - Qiita
GitHub - TechnologyAdvice/stardust: [TRANSFERRED] See https://github.com/Semantic-Org/Semantic-UI-React![GitHub - TechnologyAdvice/stardust: [TRANSFERRED] See https://github.com/Semantic-Org/Semantic-UI-React](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a520bf64e2b15056a7b37edf66a4b97b5560858/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F751b7bb0efe898c1187de7f7c8c92b483fe547b96d568a0aea71180e31b4609b%2FTechnologyAdvice%2Fstardust)
React/Reduxにおける現場での喜び/ツラみ
Elm for React.js Users
