Reactアハ体験 - Qiita
Ryan Florence氏のReact Rally talkはこの原則をより深くカバーしているのでオススメです。 2つのコンポーネントがstateを共有したい場合、stateを同期させるのではなくstateを持ち上げる必要があります。 コンポーネントベースのアーキテクチャでは、stateの共有は自ずと困難になります。2つのコンポーネントが同じstateに依存する場合、そのstateはどこにあるべきでしょうか？これは最終的にReduxで決着した解決策のエコシステム全体を活性化するような人気のある質問でした。Reduxの解決策は「store」と呼ばれる別の場所にstateを集約することです。コンポーネントはstoreを必要な部分だけ購読でき、storeを更新するための「actions」をdispatchすることもできます。Reactの解決策は2つのコンポーネントの最も近い親を探し、そこで共有
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
React Native入門 ─ Hello,Worldからネイティブ連携まで
React Native入門 ─ Hello,Worldからネイティブ連携まで Kameda Shohei（GLOBAL EDUCATIONAL P...） モバイルアプリ開発におけるWeb技術の可能性を探る特集・第一弾でご紹介するのはReact Native。その生い立ち、チュートリアルから、コードベースやUIを記述する言語、パフォーマンスまで解説します。 概要 React Nativeは2013年にFacebook社内のハッカソンで生まれたプロジェクトです。2014年にiOSアプリのFacebook Ads ManagerをReact Nativeを用いて開発し、2015年3月にオープンソースとして公開されました。そして、半年後の2015年9月にAndroidをサポートし、今年のF8では、MicrosoftがReact NativeでWindowsプラットフォーム（PC, Mobile
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita
新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。 React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22) Launching create-react-app, a no config getting started experience, #nomorejsfatigue https://t.co/fqVWgn7w5t — React (@reactjs) July 22, 2016 Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。 公式ブログ記事: "Create Apps with No Configuration" GitHub: facebookincub
Webデザイナーの仕事が広がる！ElectronとReactでデスクトップアプリ開発
WebデザインとJavaScriptの技術があれば、デスクトップアプリも自在に作れる時代です。ElectronとReactを使って、SoundCloudの音楽を自由に再生できるデスクトップアプリを作ってみました。 本記事はMark Brown、Dan Prince、Bruno Motaが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 GitHubが開発したElectronは、Webデザインのスキルを存分に活用し、クロスプラットホームで軽快に動くデスクトップアプリを作成できます。この記事では、ElectronをReact、ES6、SoundCloud APIと組み合わせて、デスクトップでお気に入りの曲を流せるスタイリッシュな音楽ストリーミングアプリを作る方法を紹介します。また、この音楽ストリーミングアプリをパッケージ
Go 言語と React で考える「いい感じなURL設計」入門
Description 白ヤギコーポレーションさま主催の「最先端情報吸収研究所（AIAL）」のプレゼンテーションで使用したドキュメントです。 「URL」を軸にして、サーバーサイドを Go 言語、クライアントサイドを React (+ TypeScript) で実装する場合の要点を紹介しました。 - いい感じな URL と わるい感じな URL - RESTful API のおさらい - Echo と REST API と URL - React と SPA と URL - いい感じの URL設計を目指す旅 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. interface FooterProps { company:string } export class FooterComponent extends React.Compo
小さいReactアプリケーションのためのライブラリ書いた - Qiita
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita これ見て最近は大体自分も同じような感じのことをしているので共通化できる最小限のコードをライブラリにしてみた。 元記事でも言ってるようにやることはとても少ないのでライブラリ使わないでもいいんだけどそのへんは好み。 Usage まず普通のステートレスなReactコンポーネントを作る。dispatchというpropsを受け取ってそれを通してイベントを発火するというのが唯一の規約。 import React from 'react'; // Stateless component export default class Counter extends React.Component { render() { return ( <div> <div>{this.props.count}</div>
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
reactをプロジェクトで使ってみた感想 - Qiita
書こうと思った気持ち react+reduxを使る機会があったので、その辺で感じた事を書き連ねます。この記事では主にreact使ってみての感想なので、reduxと絡めた話はまた別記事で。 react使おうかなー、どうしよっかなー、という人の参考になれば幸いです。 reactの深い技術についての話は他のみなさんが書いてくれていると思うので、ここが良かったとか、ここではまった、みたいな実体験話がメインです。 ベストプラクティスとは思っていませんが、とりあえずそういうやり方もあるんだなぁ、くらいな気持ちで読んでもらえれば。 使おうと思った理由 BackboneとjQueryでメンテされているUIを変えるチャンスが来たのが発端。現状だとviewにロジック書いてたりmodelにview寄りの処理が書いてあったりとだいぶ宇宙の法則が乱れていて辛かったので、UI変えるなら下回りの技術も変えよう、と思った
業務系アプリの実装だからこそReact使おうぜ - タオルケット体操
この記事は(React.js Advent Calendar 2015)http://qiita.com/advent-calendar/2015/reactjsの20日目の記事になります。 割とふわっとした感じの記事になるかとおもいます。 なお以下の文章は非Web系な会社で働く僕の実体験による個人的な意見で、Reactやフロントエンドの世界についての誤解に基づく意見が含まれている可能性がなきにしもあらずです。 なるべく気をつけて書いたつもりではありますが、もしも気になるようなところがありましたら指摘していただけると、誤解の流布を防ぐことができ、また僕自身の知見になりますので大変ありがたいです。 Reactが業務アプリケーションの実装に向いている理由 セキュリティリスクの軽減 ただのViewライブラリである かっちり書くのに向いている コンポーネントの再利用ができる Reactが業務アプリ
ReactとHTML5 Form Validationでリアルタイムチェック機能付きフォームを作る
サンプルについてメールアドレスとURLを入力して送信するフォームです。リアルタイムで入力値のフォーマットと入力の有無のチェックを行います。入力値に問題がなければ、送信ボタンが押せるようになります。ボタンを押すと、入力値がアラートとして表示されます。※サンプルなので、かなりシンプルに作っています。 サンプルのソースコードはGitHubで確認可能です。 maechabin/react-validation-form – GitHub実際にReactの実装を行っているのが以下のJSファイルとなります。 https://github.com/maechabin/react-validation-form/blob/master/src/app.js実装方法の説明の前にReactの基礎知識の説明や開発環境の構築方法などは省略します。その辺の情報については、当ブログの以下の記事などを参考にしてください
React.js + Babel + Browserify + gulp の環境を作ってみた - Qiita
〜 "devDependencies": { "react": "^0.13.3", "browserify": "^10.2.1", "babelify": "^6.1.1", "gulp": "^3.8.11", "vinyl-source-stream": "^1.1.0", "gulp-webserver": "^0.9.1" }, "scripts": { "build": "browserify --debug --transform babelify app.jsx --outfile bundle.js" }, 〜 後方互換を期待して各ライブラリのバージョンは固定していないので、もし手元で上手く動かない場合はバージョン番号の前の^を外してバージョンを固定して導入してみてください。 React.js は HTML ファイルの script タグで読み込むのではなく、Brows
FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]
ピクシブ株式会社 Advent Calendar 2015、19日目の記事です。 qiita.com こんにちは、愛らしくも憎らしいJavaScriptを書いてご飯を食べている @geta6 です。業務では pixiv Sketch というサービスの開発や運営に携わっています。 pixiv Sketchでは、node.jsとReact/Fluxibleを使用してサーバーとクライアントを同じコードベースで動作させるIsomorphicな構成を採用しています。 このプロジェクトでコードレビューをしていて、チームメンバーがつまずきやすいと感じたのが『FluxにおけるActionとStoreのどちらに何を実装するべきか』という点でした。 そこで、本日は『ActionとStoreとの適切な責務の持たせ方』について話をしたいと思います。 ReactとFluxについておさらい 今年の4月にこんなスライド
![FluxのActionとStoreをちゃんと分ける話 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f406d9ad5e12aa72c3776150d7ea658abaac040/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fbc92d107234fdc58fbae32acb90f7eb19738e3dc%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fg%252Fgeta6%252F20151218%252F20151218175826.png)
モバイル上のJSフレームワークの実行可能性 – ReactとRedux | POSTD
私が好むと好まざるとに関わらず、誰もが私のWebアプリをiOS9の搭載されたiPhone 6SやNexus 6Pで、超高速Wifiに接続して使っているわけではありません。 現実は甘くありません。3Gでの接続や、古いハードウェアも珍しくありません。Googleのレポートによれば、 Androidのアクティブユーザは14億人 だそうです。彼らの多くは間違いなく、最先端ではないハードウェアを使っていることでしょう。 Androidのパフォーマンスについての Jeff Atwood氏の最近の記事 などを読んだことがあるなら、モバイルWebには希望がないように感じるかもしれませんね。 その記事からいくつか注目すべき文を引用します。 端的に言えば、今日最も高速なAndroidデバイスとして知られているものでも、新しいiPhone 6Sよりも5倍遅く、2012年代のiPhone 5上のEmberに比べて
React v0.14 – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native. If you tried the release candidate, thank you – your support is invaluable and we’ve fixed a few bugs that you
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactとLoopbackことはじめ / React.js meets Loopback
react-components.com
React入門 - Part2: Browserify/Reactify/Gulpを使う - Qiita
React NativeのComponentの流行り具合 - Qiita
React Cheat Sheet