SVGファイルをズバッとReact Componentsに変換する - wadackel.me
Sketch なり Illustrator なりで作成した SVG のアイコン群を、React のコンポーネントとして扱いたくなりました。アイコンの数が少なければ、SVG のコードを手動でコピペしてコンポーネント化すれば良さそうですが、3 個くらいからもう辛くなってきそうです。 SVG を外部ファイル化して読み込むことも考えましたが、CSS でのスタイル指定が面倒になることや、HTTP リクエスト数を抑えるという点を考慮すると、やはりコンポーネント化しておくのが無難な気がします。 ただ、そこへ労力を割くのは微妙な気がするので、ある程度自動でズバッと出来ないかなと試してみたら、react-svg-converterを使うことで簡単に実現出来たので、その工程についてメモです。 前提 上記の様なアイコンセット(SVG ファイル)を React コンポーネント(JSX)化したい 書き出されるコンポ
Getting Started with TDD in React - Semaphore Tutorial
Introduction You’ve spent some time with React, maybe even written a few tests. But you’re not really sure how best to test your components. Where do you start? What exactly do you test? Some React components seem so simple that it’s not even clear whether they need tests at all. If you’ve come to React from Angular, you may have a bit of a love/hate relationship with tests. On one hand, Angular c
AbemaTVのランタイムパフォーマンスのAudit - 1000ch.net
2016.05.17AbemaTVのランタイムパフォーマンスのAudit最近業務で、巷で話題のAbemaTVのパフォーマンス改善をしている。個別具体性が高いが調査改善の雰囲気を感じ取ってもらえればそれで良いかと思い、記事にした。 AbemaTVのフロントエンドの構成話の前提となるAbemaTVのフロントエンドの構成は次の通りで、まさに流行りのといった感じ。 facebook/reactfacebook/immutable-jsReactive-Extensions/RxJSreactjs/react-routercss-modules/css-modulesビルド周りはbabelとwebpack、あとはlintツールがちょこちょこ入ったりしている。この改善の話と関係してくるのは、ReactとImmutableJSとRxJSだけ。 番組再生画面のコメント開閉が重い今回ケーススタディとして挙げ
redux-observable
Created by Jay Phelps and myself for use on our projects at Netflix, redux-observable is middleware for redux that is inspired by redux-thunk. redux-observable allows developers to dispatch a function that returns an observable, promise or iterable of action(s). When the observable emits an action, or the promise resolves an action, or the iterable gives an action out, that action is then dispatch
Finally, CSS In JS! Meet CSSX — Smashing Magazine
Imagine a web component distributed as a single .js file and containing everything. We would still have our basic style sheets, but the dynamic CSS would be a part of JavaScript. Now this is possible, and one way to achieve it is with CSSX. Similar to JSX, CSSX offers encapsulation. Being able to see all parts of a single component is a big step forward. The separation of concerns defined developm
Reduxでコンポーネントを再利用する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reduxはとりあえず使えるようになった後の情報が少ないように感じています。よく出回っているサンプルコードは「Real World 〜」のような名前がついていたとしても、あくまで雰囲気を味わうために用意されたものに毛が生えた程度で、現実に起こる問題に対する回答や指針を示しているわけではありません。業務で使うことを検討するのであれば、プロダクトの成長と共にどうやってスケールしていくかイメージできないと導入に踏み切れないですよね。本稿ではサンプルコードより大きな規模で開発していくために、Reduxにおけるコンポーネントの再利用について紹介し
Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ
技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 ［ランキングシェアの記事作成画面］ ※画面は開発中のものです。（動画にしたら？との意見があったのですが、Windowsで画面を録画する方法が分からず…） Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元：Reactive, Component-based UIs with React | Consta
reBEM: React ♥ BEM
It’s been about a year since me and Kir Belevich started using React at Lazada Group for some internal admin interfaces. We learned a lot during that time and our minds have been heavily shifted by that one-way data-flow philosophy React pushes. Since React is not exactly a framework, but just a view library, we have both freedom of choice and a burden of responsibility, like: how to structure you
Trello clone with Phoenix and React (pt.2)
This post belongs to the Trello clone with Phoenix Framework and React series. Intro and selected stack Phoenix Framework project setup The User model and JWT auth Front-end for sign up with React and Redux Database seeding and sign in controller Front-end authentication with React and Redux Setting up sockets and channels Listing and creating new boards Adding new board members Tracking connected
Enzyme: JavaScript Testing utilities for React
Testing code is crucial for the maintainability of a complex code base, but it is just as important that tests are easy to write, maintain, and understand. Frontend code is no exception to this rule, and behaviors that live in your UI should be tested as well. Almost three months ago, Airbnb open sourced Enzyme, a JavaScript library for testing React components. Since then, the reception has been
Morphing SVG Paths with React Art
I say "challenge" because it took all of a few moments to check out the ART repo and see the Morph Demo which links to art/morph/path. That's of course what this all about, morphing a path. Sebastian Markbåge has thought of everything. On Reactiflux the demo of morphing batman logos was proposed and linked to. You can read the orignal source with the linked SVG at http://tavmjong.free.fr/blog/?p=7
React AJAX Best Practices
When you start asking about AJAX and React, the first thing the experts will tell you is that React is a view library and React has no networking/AJAX features. It's good to know, but not very helpful when you just want to get data from the server into your React components. The truth is, there are a ton of ways to do it. You probably have thought of a couple ways yourself, but if you choose the w
Using React with canvas element
We have React that helps us to work with massive mutable DOM in a nice immutable functional style. That is awesome. But I would like to describe a way of using React that helps you to work with mutable object representation of “immutable” <canvas> element. WTF? Yes, it sounds strange. But it works really well. MotivationI am using <canvas> element a lot. I made several complex applications which u
Trello clone with Phoenix and React (pt.1)
This post belongs to the Trello clone with Phoenix Framework and React series. Intro and selected stack Phoenix Framework project setup The User model and JWT auth Front-end for sign up with React and Redux Database seeding and sign in controller Front-end authentication with React and Redux Setting up sockets and channels Listing and creating new boards Adding new board members Tracking connected
Phoenix v1.1.2 and React.js
Kind of like chocolate and peanut butter!IntroductionPreviously, installing and using React.js on a Phoenix application required ripping out brunch and replacing it with something like Webpack to get everything working, but the process has been improved significantly with the introduction of Phoenix v1.1.2 which includes a new version of Brunch that works with npm. We’ll walk through creating a ne
Reactjs のテストを ava + jsdom で書いてみる - Qiita
'use strict'; import AppDispatcher from './app_dispatcher'; import React from 'react'; import ReactDOM from 'react-dom'; import {EventEmitter} from 'events'; // Store class CounterStore extends EventEmitter { constructor() { super(); AppDispatcher.register(this._onAction.bind(this)); this.CHANGE_EVENT = 'change'; this.counter = 0; } _onAction(action) { switch(action.actionType) { case 'COUNTER/UPD
React/FlumptでTodoMVC書いた1 - babie, you're my home
Cycle.jsは長期ケイゾク案件箱に入ったので（Clojure/Omからやるぞ）今作ってるサービスはReact/Flumptで作ることにした。なので、Flumptの素振りでおなじみTodoMVCを作った。 ここです→babie/flumpt-todomvc。 動かすには git clone して npm install して open index.html してください。 さっき一通り動くようになったとこでリファクタリングも何もありゃせんが、今日はもう疲れたので終わり。「なんでこうなってないんだよ！」ってのがあったら（あると思います）、プルリク・イシュー下さい歓迎。いや、まぁ1ファイルに詰め込んでるんでそれ以前の問題ですが。そういえば、FlumptのPromiseフレンドリーで画面がシパパパッって変な更新しないみたいな強み、全然活かしてないですね……。IndexedDBぐらい使えば良かっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.wolksoftware.com/blog/working-with-react-and-typescript
Redux Middleware in Depth - Qiita
Deco - React Native IDE
