【React Native】良さげなコンポーネント紹介 - Qiita
React Native Advent Calender12/24への投稿記事です！ メリークリスマス 色々なコンポーネントがありますが、探すのって大変ですよね・・・・。 それに探しても探し切れなかったりなどなど。なので面白そう、あるいはすごそう、使ってみたことあるなどなどのコンポーネント紹介していきます！ また、こっちの方がよいぞー！これとかどう？などなどあればお教えいただけますと幸いです！ react-native-router-flux 名の知れたルーティングライブラリ。react-routerライクな書き方で使うことができます。 tabだってアニメーションだってできてしまう万能な子。 Sceneを使ってルーティングを定義します。そして戻るアクションやスワイプバックは自動実装。 tabについても書くだけでタブ遷移の仕組みも実装してくれます。 如何せんドキュメントがよくわからなくてソー
Web サイトっぽい SPA に必要なブラウザナビゲーションのエミュレートなど
Web サイトっぽい SPA に立ち向かう 大分前の話ですが、Node学園 20時限目 今回もdots!!!!! - connpass で Client Side of なんちゃらfresh.tv としてお話した内容のうち、Web サイトっぽい SPA に関してだけこだわりを再抽出して書き留めます。 本件は、ページ全体のスクロールや頻繁なナビゲーションを伴わず、1画面におさまるレスポンシブな Web アプリを作っている場合はあんまり関係がありません。画面内の局所的な状態更新は、コンポーネントの責務分割やら何やらの設計なので実は別の話です。 総じて、Web サイトっぽいくせに大人の事情で Web ブラウザのネイティブなナビゲーションを積極的に破壊しにいくときの心構えです。 URL が変わっても最低限レンダリングできるまで画面更新を遅延させる 画面遷移に必要なのは、 URL が更新されても次の
Electron + react.js + gulp でメニューバーアプリを作ってみた - fukajun - 僕はvimで行きます -
やってみたこと electronでとあるチャットの内容をみるだけのアプリを作ってみた。 macのメニューバーにアイコンが表示されて、クリックするとチャットの内容を 一覧で表示することができる。また、新着メッセージがあったときに デスクトップに通知を表示、メニューバーアイコンを未読有りののアイコンに 変更するなど基本的な動作を実装してみた。 実装において、react.js と gulp を利用して開発を行っている。 start mkdir start cd !$ npm init -y npm install --save electron-packager npm install --save electron-prebuilt npm install --save menubar index.js作る var menubar = require('menubar') var mb = m
Electron, Reactでタブブラウザを作ってみた - Qiita
知人がesaのデスクトップクライアントを使わなくなった理由が、複数タブが開けなくて不便だったと聞いた。 確かに「Electronのアプリでも複数タブが使えるといいな」と思ったのでさくっと作ってみました。 作ったもの タブ周りの処理を中心に書いた。ブラウザというよりただのQiitaリーダ。 環境 MacOS X 10.10.4 Node.js v.4.1.1 electron v.0.34.3 準備 Electron環境の導入が必須。 30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまでがとても参考になります。 今回はReactをES6で書くのでbabel+webpack+gulpの設定を書いておきます。 gulpfile.js webpack.config.js npmで必要なパッケージをインストールし、gulpでビルド用のタスクを起動すると
速報：仮想 DOM は殺された。誰に？ magnum.js に - Qiita
mag.module('lister', { controller: function(props) { this.item = [1, 2, 3] this.title = 'Lister' }, view: function(state, props, element) { state.h2 = { _text: state.title, _onclick: function() { state.show = state.show ? !state.show : true state.item.reverse() state.title = 'Gister' + state.show } } } }) mag.module の第一引数、lister は <div id="lister"> と対応しており、ここで両者が結ばれます。controller 関数は一度だけ呼ばれて、view 関
React.jsチュートリアル【日本語翻訳】
フロントエンドの世界では今React.jsが注目されてきていて、自分もチュートリアルをやる機会があって、その際に日本語訳（和訳）を簡単に作っていました。まだこのチュートリアルに関して翻訳されたものがなさそうだったので、ちょっと手直ししてブログにアップすることにしました。誤訳などもあるかと思いますが、Google翻訳よりはマシだと思ってお使いいただければと思います。 当記事のチュートリアルは「React v0.13」当時の古い内容のものとなっています。最新の「React」の公式チュートリアルの翻訳記事は以下となります。 Reactチュートリアル: Intro To React【日本語翻訳】 – maesblog React.js React.jsReactはFacebookが開発しているJavaScriptのフレームワークです。MVCで言う所のViewの部分に特化したフレームワークとなってい
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
Private Presentation
Private content!This content has been marked as private by the uploader.
React Native ファーストインプレッション - Qiita
React Native 概要 React.js とだいたい同じ作法で、JavaScript で書いたコードが iOS ネイティブアプリとして一応動く。そのフレームワークと開発環境を提供する。 React.js と同じ React を謳っているとおり、JSX で UI コンポーネントを定義するとか、Props や State で View のデータフローを整えるとか、setState() によるデータバインディングとか、諸々が一緒。従って React.js でアプリケーションを作ったことがあれば、学習コストをほとんどかけずにアプリが作れる･･･かも 例えば以下のように、入力値をそのまま画面にエコーするアプリケーション。 これはこんな感じのコードになる。 var React = require('react-native'); var { AppRegistry, StyleSheet, T
React.jsをCoffeeScriptとjadeで書く - Future [ _ ]
React.jsをCoffeeScriptとjadeで書く February 13, 2015 はじめに React v0.13.0 Beta 1 | React React.Componentを使うと生のJSのclass形式でReact Componentを定義できる reactjs - react-jadeでjadeテンプレートから仮想DOMを出力する - Qiita JSXのXの部分をjadeで書けるようにするライブラリ (Jade -> React VDOM) ここあたりの記事を読んでRiot.jsなら素でできるCoffeeScriptとJadeの組み合わせがReactでも出来そうだと気づいたので試行錯誤中、 よさ気な書き方を見つけた話です。 結論 こうです。 https://gist.github.com/uzimith/145a0cf8e342dc46ac96 React =
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Post by @ficc-workbook · 2 images