React JS Learning with React Enlightenment
Written by Cody Lindley sponsored by — Frontend Masters Learn React in the terse cookbook style found with previous Enlightenment titles (i.e., jQuery Enlightenment, JavaScript Enlightenment, DOM Enlightenment) Read About React JS Online At: Stumbling on what is react? React.js is a JavaScript library that can be used to build user interfaces. reactenlightenment.com download a .pdf, .epub, or .mob
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 | POSTD
ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 (編注：2016/7/27、いただいたフィードバックをもとに記事を修正いたしました。) 概要 この投稿は、HOCパターンを利用してみたいという 上級ユーザ 向けの記事です。もしReactが初めての方は、まず Reactのドキュメント を読むところから始めるとよいでしょう。 Higher Order Componentsは、さまざまなReactライブラリにとって価値があることがわかっている素晴らしいパターンです。この投稿で、HOCとは何か、できることは何か、制約は何か、どのように実装するのか……という点について詳細に見ていきます。 付録として、関連トピックについても見ていきます。それらは、HOCを学ぶ上での中核にはならないものの、カバーしておくべきだと私が思っているもので
GitHub - ianstormtaylor/slate: A completely customizable framework for building rich text editors. (Currently in beta.)
A completely customizable framework for building rich text editors. Why? · Principles · Demo · Examples · Documentation · Contributing! Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity. It can do this because all of its logic is implemented wi
Getting Started with TDD in React - Semaphore Tutorial
Loves JavaScript, Ruby, and IPAs. His blog helps fellow devs level up their Angular, React, and JS skills. Known as @dceddia around the Interwebs. 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 whet
Fullstack React: How to Write a Google Maps React Component
In this tutorial, we'll walk through how to build a React component that uses the Google Maps API. Integrating React with external libraries like Google or Facebook APIs can be confusing and challenging. In this discussion, we'll look at how to integrate the Google Maps API with React. In this post we'll deal with lazily-loading the library through building complex nested components. This post is
フロントエンド視点：デザイナーと協業して作るスタイルガイドの難易度を下げる
前回 Atomic Design を実案件に導入した話で触れたコンポーネントリストを作り始めたとき、個人的にいろいろと学びがありました。 コンポーネントリストやスタイルガイドは、フロントエンドエンジニアとデザイナーが協業して作る必要がありますが、この協業がなかなかうまくいかず、スタイルガイド運用をワークさせるのは難易度が高い印象がありました。 自分自身、今まで携ってきた開発プロジェクトにおいて、うまくワークしたと思えるスタイルガイド作りができなかったのですが、現在のプロジェクトで開発初期からスタイルガイドを作り、リリース後、運用フェーズまでワークさせることができました。 本記事ではフロントエンドエンジニアとデザイナーが協業してスタイルガイドを作り始めるにあたって気をつけたことについて書いていきます。 共通言語としてのスタイルガイド 開発において、スタイルガイドが欲しい理由は、開発中のコミュ
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
サーバーサイドプログラマーのためのReact.js 入門 4. react-router、更新系ページの追加 - yuumi3のお仕事日記
React.jsの仕事の納期におわれ1ヶ月ぶりになってしましたましたが、今回は react-router の導入 更新系ページの追加 を行い、Todoアプリを完成したいと思います。 react-router JSで作られたアプリはSPA(Single Page Application)と呼ばれているように物理的には1つのページ(URL)内で動作します。しかしアプリがURLに対応してないとブラウザーのbackボタンに対応出来ないないですし、プログラムの構成を考えるのも面倒です。 そこで、URLとアプリ(JS)を対応づける react-router を使うと Rails の routes のように URLにアプリを対応づけ出来、今ままで Rails 等で開発してきた人にはとても嬉しいことです。 react-router には チュートリアル や充実したドキュメント がありますので、しっかり理解
2016-03-17のJS: React.js v15.0 RC、WebAssembly、最近のJavaScriptツール/ライブラリ
JSer.info #270 - React v15.0 RC2がリリースされています。 RC2はRC1で見つかったバグやSVGに関する変更がrevertされています。 RC1を含め変更点については下記の記事にまとまっているので、Reactを使っている人は見ておくといいかと思います。 React.js v15.0 changes - blog.koba04.com MSEdge(ChakraCore)、Firefox、Chrome(V8)からそれぞれWebAssemblyを試験的にサポートしたというアナウンスがされています。 V8 JavaScript Engine: Experimental support for WebAssembly in V8 A WebAssembly Milestone: Experimental Support in Multiple Browsers ★
Code cartoons
Wasmtime Reaches 1.0: Fast, Safe and Production Ready!
React.js Conf 2016 - Steve McGuire - Performance Without Compromise
Performance and declarative, functional programming are at odds in the minds of many developers. At Netflix, we have an especially challenging performance target to hit. This talk will explore how we managed to take an unflinching stand on a completely declarative React based architecture while maintaining 100ms key-input and 60fps on the 600mhz single-core devices in your living room. We'll talk
How elm programming language made our world better
This article was originally titled "Elm in the real world", but it started to sound strange to me after Evan mentioned about it. - Ossi, Jan 16th 2016 Elm is a beginner friendly functional reactive programming language for building web frontend. Choosing Elm for a customer project made my job nicer than ever and helped maintain project velocity during months of development. This boils down to two
GitHub - dfilatov/vidom: Library to build UI based on virtual DOM
Fast virtual DOM builder and patcher under the hood Update batching and synchronization with browsers rendering lifecycle by default Fast server-side rendering with ability to reuse existing DOM in the browsers also known as isomorphism Easy and clear way to subscribe to DOM Events API to build your own high-level components Namespaces support (e.g., SVG, MathML) Ability to render multiple compone
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Almin · Flux/CQRS patterns for JavaScript application.
GitHub - tj/react-enroute: React router with a small footprint for modern browsers
GitHub - decosoftware/deco-ide: The React Native IDE
GitHub - brigand/react-mixin: mixins in react with es6 style classes
GitHub - matthewmueller/28kb-react-redux-routing: React + Redux + Routing Stack for just 28kb
GitHub - infernojs/inferno: :fire: An extremely fast, React-like JavaScript library for building modern user interfaces
Support JSX Syntax · Issue #1467 · jquery/esprima