Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
サーバーサイドプログラマーのためのReact.js 入門 3. いよいよ React.js を書く - yuumi3のお仕事日記
いよいよ React.js 入門 開発環境作成に2回も使いましたが、今回から React.js を始めます。 開発環境というかエディターですが、主なエディターは JSX, ES6 をサポートする拡張パッケージ、マクロ等があると思いますので入れておきましょう。もちん WebStorm のようなIDEも良いかもしれません。 これから作るTodoアプリはRuby on Railsのサーバーとhttpプロトコルで通信する必要があります。そこで今回は通信部分には、Promisベースの今風なHTTP clinet ライブラリー axios を使ってみます、 使い方は極めてシンプルです。 インストールは $ npm install --save-dev axios まずは、超簡単なReact.js アプリを動かす 前回書いた index.js を以下のように変更してください。もちろんターミナルでは we
[翻訳] Airbnb React/JSX Style Guide - Qiita
この翻訳について Airbnb React/JSX Style Guideの和訳です。 間違っていたり分かりにくい箇所があれば、ご指摘いただけると幸いです。 Airbnb React/JSX スタイルガイド このスタイルガイドは現在一般的に使用されている標準に基いていますが、場合によってはいくつかの慣例（async/awaitやstatic class fields）が含まれていたり禁止されていたりします。現在、このガイドにはステージ3より前のものは含まれておらず非推奨です。 目次 基本的なルール クラス vs React.createClass vs ステートレス ミックスイン 命名規則 宣言 アラインメント 引用符 空白 引数 参照 括弧 タグ メソッド 順序 isMounted 基本的なルール Reactコンポーネントは1ファイルに1つだけにしてください。 ただし、1ファイルに複数の
![[翻訳] Airbnb React/JSX Style Guide - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa053bc9d3665d1774c48cfd8ffbfaff68bb408f/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTQ4MTAlMkZwcm9maWxlLWltYWdlcyUyRjE3Njg4MDkyMjg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPWU5MDEwZmQyNDRiZGU3MDY2NWYxMjI2MDUxMTIwMGQ2%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D54feabc621818e14c3ca4cdd59643889%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwQWlyYm5iJTIwUmVhY3QlMkZKU1glMjBTdHlsZSUyMEd1aWRlJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9OGUzZmJjNDJmZTI1MmJkMjU5ZjRiOTc3NzkyMDBiNDU%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5YW1hZGFzaHkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0wYjFhYTE5YTA2NWZkZDczNWQ1NTdmNGYxYmFiZDM0ZQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D71eb74774b9b0cfde3d689e6d576ef43)
[React.js] setStateしても直ちにstateは変更されない | Like@Lunatic
最近仕事でReactをやっている。 今回のネタはひとこと（ひとコード？）で言うと以下のようなこと。 getInitialState () { return { clicked: false }; }, clickHandler () { this.setState({ clicked: true }); console.log(this.state.clicked); // -> false }, render () { console.log(this.state.clicked); // -> true return <button onClick={this.clickHandler}>Click Me</button>; } インタラクションのハンドラで this.setState したとして、そのハンドラ内でthis.state を参照しても、まだ更新後の値は取れない。rende
人気のFluxフレームワークReduxをさわってみた - マルシテイア
fluxフレームワーク、今は Redux が一番アツい様子なので触ってみた。 github.com (追記 2015-10-03 18:15 APIや用語が大幅に変わったので更新した) Redux の経緯 2015-05-30 に公開された "The Evolution of Flux Framework" という記事がある。 medium.com Reduxはその PoC 的な実装だったんだけど、実用的ということでめっちゃ流行っているみたい。 Initial commit も 2015-05-30 だった。 Initial commit · rackt/redux@8bc1465 · GitHub 最近の flux フレームワークだと fluxible と flummox が人気だったけど、 flummoxのページには 4.0 will likely be the last major
Reactでクライアント側で動的にForm項目を追加/削除する場合のサンプル - saito400’s blog
2015 - 04 - 11 Reactでクライアント側で動的にForm項目を追加/削除する場合のサンプル ReactでinputタグなどのForm項目を動的に追加/削除する部分のサンプルを作りました。 以下は追加ボタンや削除ボタンをクリックしたタイミングではDBの値を更新せず、保存ボタンをクリックしたタイミングでDBを更新する場合のコードですが、最後に追加ボタンや削除ボタンクリック時にDBを更新するパターンも追加しました。 処理の流れのイメージ こんな感じ Domを直接操作するのではなく、stateを更新するとReactが差分を計算し画面を再描画してくれます。 作ったコード全体 saito400/go-martini-react-demo github.com コード抜粋 画面のイメージ コンポーネント は以下の通り定義しました。 var Todo = React.createClass
React.ComponentでReact.findDOMNode()がエラーになる: JavaScriptメモ
React.ComponentでReact.findDOMNode()を利用しようとすると「Uncaught TypeError: _react2.default.findDOMNode is not a function」というエラーが出てしまいました。class TodoAdd extends React.Component { _onAddToDo(){ var newTodo = React.findDOMNode(this.refs.todo).value.trim(); this.props.onAddToDo(newTodo); } render () { return ( <div> <input type="text" ref="todo" /> <input type="button" value="submit" onClick={this._onAddToDo.bi
React における State と Props の違い - Qiita
State と Props の違いと、使い分けについて。ほぼこちらの日本語訳です。 State と Props React コンポーネントがデータを受け取ったり、ハンドリングしたり、表示したりするための主要な方法として、State と Props があります。 この二つの概念の違いを知ることは、React を効率的に利用するために役立ちます。 State: そのコンポーネントが持っている状態 Props: 親コンポーネントから渡されたプロパティ State (状態) mutable data (可変のデータ) maintained by component (コンポーネントによって保持) can change it (変更可) should be considered private (プライベートであるべき) State は可変のデータです。State の変更は、仮想DOMとの差分をとり
React.jsだけで作る！バリデーション付きフォームの作り方！ – ACC
– React！前回までは – Reactという謎の単語を目にし、意気揚々と調査に乗り込む。 そこで見たものは英語と専門用語に溢れた参考記事の数々…。 そんな中、どうにか自力でプログラムの入り口「Hello!World!」の出力に半日かけてようやく成功し、その勢いでバリデーション付きフォームの作成にとりかかったのであった…。 前回の記事：React.jsって？初心者から始めるReact導入！ ということで今回はグッと実用レベルまで難易度を上げて、React.jsだけを使用したバリデーション付きフォームの作り方を解説します！ ちなみに今回ここまでたどり着くのに約20時間近くダラダラとかかってしまいました…。ぐぬぬ、侮れないぞReact.js。 Reactでの値の受け渡しpropsとstateまずReactを使う上で決して避けては通れないプロパティがこのpropsとstateです。 これらはど
cybozu.com 稼働状況 を React/Redux で作り直した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。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 稼働状況」とは? クラウドサービスはサービスの稼働状況をステータス
React Routerで認証を制御する方法 - Qiita
React Routerで認証を制御する方法です。試行錯誤して良さそうな実装方法を発見したのでご紹介します。 アプリに認証があると、画面ごとに、 認証済みユーザのみアクセスを許可したいページ アカウント設定など 認証していないユーザのみアクセスを許可したいページ ログイン・新規登録など 認証に関係なくアクセスを許可したいページ Qiita投稿のようなパブリックなコンテンツなど の設定が必要になる場合があります。 React Routerのサンプルをいくつか見たところ幾つか認証を制御する方法が示されていました。 onEnterを使う方法 AuthenticatedComponent onEnterを使う方法 本家のサンプルで例示された実装です。現在βのreact-router 1.0.0が必要になります。 function requireAuth(nextState, transition)
jsx(Reactのほう)に慣れる - こおろぎと蛞蝓
この投稿は VirtualDOM Advent Calendar 2014 22日目の記事です。 jsx自体は特に難しいわけではないんだけど、何ができるか詳しくしらなかったので 調べたりしたことを書いていきます。 基本 jsxは、reactのDOM生成部分のsyntax sugarを用意してくれてるイメージ。 Reactで要素を作成するときは React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!') こんな感じで書くけど、これを <a href="http://facebook.github.io/react/">Hello!</a> こんな感じでhtml / xmlライクに書けるようにしてくれるのがjsxの役割。 jsxの構文が実コードでどうなるか知りたい人はここ で見ることができる。 も
React/Redux苦労話 2015 - Qiita
この記事は、React.js Advent Calendar 2015の24日目の記事であり、 8月よりReactとReduxで既存システムの置き換えを行った、私の苦労話です。 簡単に対象のシステムを紹介するとこんな感じです。 約50機能のシステム PCブラウザで見ることが前提 サーバサイドも置き換えをする(実装言語はGo) フロントもサーバサイドも自分がやる この記事には以下の内容は含まれません。 Reactの使い方 Reduxの使い方 すごくかっこいいこと それでは全ての始まった8月より始めます。 8月 その前にReact/Reduxを選んだわけ みなさんご存知の通り、React以外にも、UI向けのライブラリはいくつかあります。今回もReact以外にAngularJS、Angular2、Mithril、Riotが候補に上がっていました。 しかしAngularJSはAngular2が発表
React(Flux)アプリをPolyglot.jsで多言語化する - EduTalk
リンガルボックスでは、現状のスタックは下記のようになっています。 クライアントサイド: Flux(Alt.js) + ReactRouter + Webpack + Polyglot.js(多言語化) サーバーサイド: Rails + Active Model Serializer Polyglot.jsよりもUS Yahooのreact-intlの方が有名かと思うのですが、僕がRailsのi18nの方法に慣れていることもあって同じように書けるPolyglot.jsを選びました。Polyglot.jsはAirBnBがオープンソースとして公開してるパッケージでAirBnBの多言語化に利用されています。 今回はこのスタックで、多言語対応をどのように行っているのか簡単に書いていきます。 1. 各言語のロケールをlocalesフォルダーに保存 現状はlocalesフォルダーにen-US.js、ja
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
eslint-plugin-react/docs/rules/no-string-refs.md at master · jsx-eslint/eslint-plugin-react
ReactのテストをEnzymeで書いてみよう - Qiita
GitHub - gaearon/react-document-title: Declarative, nested, stateful, isomorphic document.title for React
今からはじめるReact.js〜propsとstate、それからrefs〜 - Qiita
GitHub - kodyl/react-document-meta: HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.
folder-structure.md
