GitHub - facebookarchive/flux: Application Architecture for Building User InterfacesYou 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.jsでwindowやdocumentやjQueryのイベントを使う方法 | jMatsuzaki
React.jsでwindowやdocumentやjQueryのイベントを使う方法 2016年1月14日投稿 カテゴリ：React.js 著者: jMatsuzaki 私の愛しいアップルパイへ JavascriptライブラリーのReact.js便利ですよね。DatabaseとAjaxをガリガリ使って画面を更新していくようなWebサービスを作るときに重宝しています。今かなりハマっています。 フレームワークといえば規約やルールがあるので実装に悩むことが珍しくありませんが、React.jsでありがちなのが特定のDOMと連動してwindowやdocument、jQueryの独自イベントを使いたいときではないでしょうか。 例えば、jQuery UIを使いたいときや、特定の要素以外の場所をクリックしたときにポップアップを閉じたいとき、Windowがリサイズされたときに特定の処理を走らせたいときなど
30分間React入門「いいねボタン」作成チュートリアル
「今日からReactを始めたい」 「とりあえずReactで何か動かしてみたい」 ここは、そういった方が、Reactを始めみるためのチュートリアルです。 今回は、Reactを使ってFacebookのいいねボタンのようなコンポーネントを実装していきます。 > 今回作る「いいねボタン」のデモ今回作る「いいねボタン」のデモ 実際に押せます↓ > チュートリアルの目標チュートリアルの目標 Reactのコンポーネントを実装できるようになる Reactコンポーネントのイベントをハンドリングできるようになる Reactコンポーネントの状態(state)を実装できるようになる Reactの雰囲気をつかめる！ > このチュートリアルについてこのチュートリアルについて なお、このチュートリアルは、下記のバージョンで動作確認しています。 npm 2.14.2 react 0.14 react-dom 0.14 w
Reactの再レンダリングをなるべく減らす - Aqutras Members' Blog
こんにちは。maxmellon です。 今回は，Reactの再レンダリング回数をなるべく減らす方法について紹介したいと思います． 前回記事と関連があります．もしよろしければ合わせてお読みください． 本記事は，Reactのライフサイクルなどの基本的な仕様の理解のある前提で話を進めていきます。 Reactの基本的なことにつきましては，下記などを参照してください． https://facebook.github.io/react/docs/why-react.html http://mizchi.hatenablog.com/entry/2014/09/02/201728 はじめに Reactが再レンダリングされるケース Reactのコンポーネントが再レンダリングされるには，次の２ケースがあります． state の変化によって DOM が 追加，削除された時． state の変化によって DOM
ZOZO Technologies TECH BLOG
2020-07-01 ZOZOTOWNのインハウス広告運用を支援するデータと仕組みの話 BigQuery データ マーケティング 広告 本記事では、ZOZOのマーケティング部門の広告運用のインハウス化に伴って、これまで取り組んできた広告データの収集と活用、その仕組みにフォーカスして事例をご紹介します。 ZOZOTOWNのインハウス広告運用を支援するデータと仕組みの話 2020-06-29 【オンラインMeetup イベントレポート】ZOZOテクノロジーズの大規模データ活用 イベントレポート GCP Elasticsearch 検索 機械学習 こんにちは、ZOZOテクノロジーズ CTO室の池田（@ikenyal）です。 ZOZOテクノロジーズでは、6/22にZOZO Technologies Meetup -ZOZOテクノロジーズの大規模データ活用-を開催しました。 zozotech-inc
React使ってSPAを作るよ（3） - m31
React使ってSPAを作るよ目次 React使ってSPAを作るよ（2）の続きです。 まずは残りのコンポーネントを書いてしまいます！ ﾄﾞ━(ﾟДﾟ)━ﾝ!! var React = require('react'); //記事リンク var ArticleLink = React.createClass({ render: function() { var articleImage = { backgroundImage : "url(" + this.props.image + ")" }; return ( <a href={this.props.articleUrl} target="_blank" style={articleImage}> <h2>{this.props.articleTitle}</h2> <p>{this.props.articleDescription}<
React-FlexBox-Gridの使い方 - Qiita
React-FlexBox-Gridはflexgrid.css用のdivを生成するreact componentです。 CSS Modulesという実装方法を取っています。 webpackを使う場合、css-loaderを一緒に使う必要があります。 Component 次の三つのコンポーネントがあります Grid Row Col 使い方はbootstrap3と大体同じです。実装にCSS flexible boxを使っています。 Gridの中にRowを置きます。 Rowの中にColを置きます。 Colにxs={6}のように、幅を設定します。 例 const React = require('react') const ReactDOM = require('react-dom') const {Grid, Row, Col} = require('react-flexbox-grid');
React と jQuery を共存させる - GMOインターネットグループ グループ研究開発本部
GMO スマートリザーブに React を導入 フロントエンドのトレンドを追いかけている D.M. です。 2015年の初夏ごろに次世代システム研究室が GMO スマートリザーブの立ち上げをサポートしました。 http://www.gmo-c.jp/service/smart_reserve.html こちらは店舗管理者がお店の予約を管理するためのシステムですが管理画面は Single Page Application となっており、 JS 部分に React を導入しています。今回はその案件で問題になった React と jQuery の共存について書いてみようと思います。 React を選定した理由 React については以前記事でまとめており概要は把握していました。 http://recruit.gmo.jp/engineer/jisedai/blog/react-refactori
react-routerの使い方: JavaScriptメモ
react-routerの使い方メモ。お約束のnpmでインストールして npm install --save react-router importで必要なモジュールを読み込む。 import { Router, Route, Link, browserHistory,IndexRoute ,IndexLink,Redirect} from 'react-router' 簡単な使い方はいかのような感じ。以下の場合はAppコンポーネントでルーティングを設定してリンクでHomeページとAddressページを行き来できるようにしている。 import React,{ Component } from 'react'; import { render } from 'react-dom'; import { Router,Route,Link,browserHistory } from 'reac
react-router の examples をざっと読んでみた - ryhmrt’s blog
Redux と共に redux-simple-router を使おうと思っているので、react-router をおさらいするためにサンプルコードをざっと読んでみました。 以下、読んだときのメモ。 Active Links <Link> の activeStyle アトリビュートでリンクがアクティブなときのスタイルを定義できる。 Animations URL遷移をする際に componentWillReceiveProps が呼び出されて遷移先のパスが取得できるということは理解した。 あと ...props は使いどころによっては便利だと思いました。 Auth Flow <Route> の onEnter にコールバックを渡しておくと、そのパスが有効になった際にそいつが呼ばれるようだ。 サンプルではそのコールバック内で未ログイン時にログインコンポーネントを描画するURLに遷移させている。
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 で要素のクラスを動的に付け外しするなら JedWatson さんちの classnames が便利 - BattleProgrammerShibata
React 公式ドキュメントからもリンクされていました。 github.com すてきなドヤ顔。 Usage はかなりシンプルなのでそれ読めばすぐ使えるよ！ …では味気ないので本日更新した MarkdownPreview の v.0.1.0 からコードを抜粋して利用例を紹介したいと思います。 // 例示なので説明に不要部分は削除してます import ClassNames from 'classnames'; export default class ModalWindow extends React.Component { render() { const classNameModalWindow = ClassNames({ 'md-modal-window': true, 'l-flex ': true, 'is-opacity-zero': this.state.isOpacity
ES6版React.jsチュートリアル - Qiita
はじめに 初心者による初心者のための記事 React.js公式チュートリアルの和訳風 ES6 さらっと仮想DOM調べてみたよ、ぐらいの人向けです。 JavaScript初心者、ES6初心者、React初心者向けかつ僕がそうです。 なので間違いがあるかもしれません。見つけたら教えて下さい。 公式のチュートリアルはこちらです。 React Tutorial React チュートリアル (和訳) 公式Documentのソース (Markdown) 環境 Mac OSX Node.js v0.12.7 Gulp 3.9.0 React 0.13.3 作るもの 公式のTutorialに沿って、シンプルなコメントボックスをReactで作成します。 次の機能を提供するものです。 すべてのコメントの表示機能 コメント投稿フォーム バックエンドサーバーとの連携 また、次の特徴を持っています。 更新最適化:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - cht8687/react-hover: React hover --- make hover easy http://cht8687.github.io/react-hover/example/
react-tooltip
GitHub - minhtranite/react-flux-starter: React Flux starter project.
GitHub - banderson/generator-flux-react: A yeoman generator for app based on Facebook's Flux/React architecture
GitHub - baptadn/react-oauth2-example: React example for handling OAuth2 authentication and refresh token
Fluxアーキテクチャの覚え書きを書いた - saneyuki_s log
ネットマネーラボ
