Storybook vs Styleguidist
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
Using React Fragments for the first time - Jack Franklin
December 18, 2017Using React Fragments for the first timeReact v16 was a very exciting release for React, and included many new features. In the recent React 16.2 release, improved support for Fragments was announced, and it's this feature that I want to talk about today. The problem that fragments solveUp until React 16 each component had to return a single element: // will error class Demo exten
Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Idiomatic Redux series. An overview of why and how to use Reselect with React and Redux Intro 🔗︎ In a good Redux architecture, you are encouraged to keep your store state minimal, and derive data from the state as needed. As part of that process, we recommend that you use "selector function
Behind the Scenes: Improving the Repository Infrastructure – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. As we worked on React 16, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as Rollup, Prettier, and Google Closure Compiler into our workflow. People often ask us questions about how we use those tools. In this post, we would like to
React Performance Fixes on Airbnb Listing Pages
We have been hard at work migrating the airbnb.com core booking flow into a single-page server-rendered app using React Router and Hypernova. At the beginning of the year, we rolled this out for the landing page and search results with good success. Our next step is to expand the single-page app to include the listing detail page. airbnb.com listing detail page: https://www.airbnb.com/rooms/8357Th
Almin.js がやってくれること - Qiita
この記事はQiita Advent Calendar 2017 React #1 の 4日目の記事です。 Almin.js について最近学んだことを説明します。 概要 今、業務で開発しているシステムで、Almin.js + TypeScript + React を使ってフロントエンドの処理を実装しています。 Almin.js Almin.jsの採用を検討したのは、フロントエンドでDDDに沿った設計をするのに使いたかったからです。 今回調査も兼ねて実装してみると、Almin.jsを利用することで、思っていたよりいい感じにクラスを設計できました。 その課程で Almin.js が何を提供するライブラリなのかということも理解が進んだので、学んだ内容を共有します。 必要だったもの 今回の開発にあたり、Viewを実装するためにReactを使うことは決まっていましたが、それ以外の部分についてはどうやっ
shallow-equal for Object/React props
オブジェクトとReactのProps向けのShallow(浅い) equalライブラリを書きました。 Shallow Equalは対象のオブジェクトのプロパティをそれぞれ1段だけ比較することを言います。 ものすごく単純に書くならば次のようなことをするライブラリです。 const object = {}, targetObject = {}; const isEqualed = !Object.keys(object).some(key => { return object[key] !== targetObject[key]; }); const { shallowEqual } = require("shallow-equal-object"); shallowEqual({ a: 1, b: 2 }, { a: 1, b: 2 }); // => true shallowEqual({
Next.js 3.0 Release: What's New?
TL;DR: On Tuesday, October 25 2016, a small JavaScript framework, Next.js was released to the public. It's a minimal framework for building server-rendered universal JavaScript web apps. Within a few months of its existence, it gathered a lot of attention from the JavaScript community. The React community was set ablaze with joy for finally having a tool that can help build server-side rendering a
Rethinking drag and drop
introducing react-beautiful-dndDrag and drop is an intuitive way of moving and rearranging things. We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible. PhysicalityThe core design idea of react-beautiful-dnd is physicality: we want users to feel like they are moving physical objects around. This is best ill
Introduction to Preact : A smaller, faster React alternative - LogRocket Blog
Preact is a JavaScript library that describes itself as a fast 3kB alternative to React with the same ES6 API. As a frequent user of React, I’d always wanted to try out Preact and see what it offers, and the differences between Preact and React. In this article, I’ll do an introduction to Preact, its key concepts and differences between Preact and React. I’ll also demonstrate how Preact works with
Getting started with PreactJS — A Step By Step Guide
PreactJS is a fast 3kB alternative to React with the same ES6 APIFirst, some background…PreactJS is developed by Jason Miller — one of my programming heroes. The framework was developed with a goal of providing high performance, memory efficiency and close compatibility with React API with an aim to keep the footprint as small as possible i.e 3kb. Preact is increasingly getting adopted in the comm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Preact internals #1: the easy parts