Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Reactを使ってみたいと思うプログラマはたくさんいると思うのですが、いざちゃんとしたものを作ろうと思うとフレームワークの存在に悩むことになります。Reduxを使うとしてもどういう組み合わせ、ディレクトリ構成でやるのがベストなのか分かりづらかったりします。 そこで使ってみたいのがRocです。React/Reduxを使ったnodeのWebアプリケーションフレームワークです。 Rocの使い方 Rocのインストールはnpmでできます。 npm install -g roc アプリケーションの初期設定はinitを使います。対話型で作ります。 $ roc init web-app-react Found a folder named /path/to/react-app, will try to use it. Using v1.0.3 as template version : ? What's
目的と概要 Draft.jsはReact.js上でリッチテキストエディタを作るためのフレームワークです。日本であまり流行ってない気がするので、始めやすいように入門記事を書いてみることにしました。 最近ではReact.jsを採用しているサイトも増えてきて、Webフロントエンドは更にリッチ化の流れが激しくなっています。 今回はReact.jsでリッチなテキストエディタを簡単につくれるDraft.jsを利用して30分でテキストエディタを作っていきます。 この記事で作れるもの こんな感じのエディタ。すごいよくある感じのWYSIWYGエディタ。 手順 環境構築 React.js、Draft.jsの環境を作りましょう。 React.jsの環境を整えている方は bash npm install draft-js --save で大丈夫です。 環境構築が面倒な方にはテンプレート用意しておきました お納めく
React.jsを使ってネイティブ風UIのモバイルアプリを作れる「Reapp」。GoogleマップとFirebaseを使った簡単な地図アプリを作ってみました。 2016年5月にこの投稿を更新し、ReactおよびReappの変更を反映しました。 Reactはユーザーインターフェイスを作成するためのJavaScriptライブラリーです。Facebookが開発し、メンテナンスされてきたことで人気を集めています。 なぜReactなのか Reactが他のJavaScriptライブラリーと異なるのは、「仮想DOM」のコンセプトに基づいていることです。変更が加えられると、実際のDOMを更新するのではなく、仮想DOMを更新します。仮想DOMに変更がある場合、DOMを何度も更新するのではなく、1度だけ更新します。 以下は公式サイトからの引用です。 Reactを利用するとDOMについて考える必要性がなくなり、
自己紹介 @adwd118 adwd 株式会社ビズリーチ スタンバイ事業部 Web歴1年 サーバーサイドエンジニア? React/Redux入門やりました speakerdeck 求人検索エンジン スタンバイ スタンバイ スタンバイ 社内向け管理画面 スタンバイの社内向け管理画面でReact/Reduxを使った スタンバイ本体ではない SPA的要素はあまりない パフォーマンス、セキュリティなどそこまで気を使ってない コンテンツ React/Fluxについて 管理画面の構成 React/Reduxを使った感想 javascriptでUIを構築するライブラリ (MVCのV) コンポーネント指向 js-centric ほぼjsの中で完結する Flux 単方向データフロー Flux ViewはStoreからデータ(状態)を受け取って表示するだけ Storeの状態を変更するのはActionのみ Fl
さて、皆様七夕の夜をいかがお過ごしでしょうか? 七夕ということで、マウスの軌跡を星が追従するJavaScriptを書きました。 作ったもの www.youtube.com DEMO ※一旦PCのみ もうホント簡単なんですが、Web1.0時代に流行していたマウスに画像を追従させるあれです。あれ。JavaScriptと言ったらこれですよね。最高! 本当にやりたっかたこと React + Reduxの勉強 設計 - 実装 - テストまで一通りの流れの経験 ここ一年ぐいらフロントエンドを書くときは「慣れてるから」という理由でVue.jsを利用していたのですが、最近はReact + Reduxで実装しているサービスが増えており、そろそろ勉強しないとという焦燥感がでてきて何かいいアイディアはないかと考えていた折に、某同僚と 「React + Reduxを使ってマウスについてくる星実装してようぜ」 とな
こんにちは、Reactに戯れ中の@yoheiMuneです。 仕事で担当しているアプリケーションについて、一部React化した際に、古い端末たちでも動く対応をしたので、それをブログに残しておきたいと思います(これは絶対に今後も参照しそうな気がします、個人的に)。 目次 今回対応した古い端末たち Reactはモダンな環境で動くように実装されているので、何も対応しないと以下のような古い端末で起動すらしないという状況でした。 iOS6やiOS7のSafari Android4.0の標準ブラウザー HTCなど一部の古めの端末 これらでも動くようにするために、いろいろと試行錯誤した結果、最終的には動くようになりました。後述の3つでした。 ES5のポリフィル導入 まずはこんな感じのエラーが出ました。 TypeError: Result of expression 'Object.freeze' [und
公開されている React コンポーネントのテストコードを見てみると、enzymeを使ってテストしているものを結構見かけます。enzyme はReact 公式でも押しているっぽいので、積極的に使っていきたいです。 Note: Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components’ output. If you’re deciding on a unit testing library, it’s worth checking out: http://airbnb.io/enzyme/ 日本語の紹介記事では@syossan27さんの記事が参考になりました。 React のテストを Enz
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
เว็บสล็อตโรม่า joker123 เป็นทางเลือกที่น่าเชื่อถือสำหรับผู้เล่นที่ต้องการความมั่นใจในการเดิมพันออนไลน์ ด้วยระบบความปลอดภัยระดับสูงและการตรวจสอบอย่างเข้มงวด คุณสามารถวางใจได้ว่าทุกการเล่นของคุณจะเป็นไปอย่างยุติธรรมและโปร่งใส เว็บไซต์นี้ได้รับการรับรองจากหน่วยงานที่เกี่ยวข้อง ทำให้คุณหมดกังวลเรื่องการโกงได้อย่างสิ้นเชิง เว็บสล็อตโรม่า joker123 สล็อตโรม่า นอกจากนี้ ทีมงานมืออาชีพพร้อมให้บริการตลอด 24
TL;DR これから React Router について学ぶならコレがおすすめ! reactjs/react-router-tutorial はじめに React Routerについて解説をされている日本語記事は、この2つくらいじゃないでしょうか。 2014-12-18 React.jsでserver-side renderingにも対応したRouting - Qiita 2015-02-20 React初心者のためのreact-routerの使い方 - ハッカーを目指す白Tのブログ ちなみに、この記事を書いているのは 2016-02-28 です。時が経つのは早いですね。 今回の本旨としては、今ちゃんと学ぶならどうすべきか検討していたら React Community 公式の react-router チュートリアルを見つけたので紹介してみよう、というものになります。初回コミットは 201
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の1つでもあります。 Webpackのとっつきに
こんにちは。maxmellon です。 今回は,Reactで作られたアプリケーションの無駄な再レンダリング回数を 簡単に調査するためのツールを一つ紹介したいと思います。 Reactの基本的なことにつきましては,下記を参照してください. https://facebook.github.io/react/docs/why-react.html http://mizchi.hatenablog.com/entry/2014/09/02/201728 はじめに 無駄な再レンダリングとは何か? 要するに,DOMの中身が全く同じなのに render() が走ってしまうことです. 具体的には exports default () => ( <div> <p>{this.state.name}</p> </div> ) 上記のようなReactComponent があったとして,再レンダリングを期待するのは
redux, react-router を使った、サーバ側で非同期APIを叩き、内容を取得し終わるのを待ってからレンダリングを行うようなような universal app を作る方法(のひとつ)です。 内容は概ねServer-Side Rendering with Redux and React-Routerと同じです。 redux: v3.0.5 react-router: v2.0.0-rc5 redux-thunk: 1.0.3 で動作確認しています。 もっと良い方法がある気がしているのであれば教えて下さい。 2018/07/24 追記 nextjs の getInitialProps がこの記事における fetchData に近いことをするので、nextjs を使うのが簡単そうです。 方針 react-router の match で、要求されたURLに合致する React コンポ
Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く