ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 (編注：2016/7/27、いただいたフィードバックをもとに記事を修正いたしました。) 概要 この投稿は、HOCパターンを利用してみたいという 上級ユーザ 向けの記事です。もしReactが初めての方は、まず Reactのドキュメント を読むところから始めるとよいでしょう。 Higher Order Componentsは、さまざまなReactライブラリにとって価値があることがわかっている素晴らしいパターンです。この投稿で、HOCとは何か、できることは何か、制約は何か、どのように実装するのか……という点について詳細に見ていきます。 付録として、関連トピックについても見ていきます。それらは、HOCを学ぶ上での中核にはならないものの、カバーしておくべきだと私が思っているもので

import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom' const flowers = [ {id: 1, name: "ひまわり"}, {id: 2, name: "たんぽぽ"}, {id: 3, name: "バラ"} ] const App = () => ( <Router> <div> <Switch> <Route exact path="/" component={FlowerLists} /> <Route path='/flower/:id' component={OneFlower} /> <Route component={NoContents} /> </Switch> </div

前書き サービスには、決済がつきものです。 特にサービスで多いかなと思うのが、月〇〇円などの月額プラン 開発中のWebアプリにその月額プランを実装する必要があったので 今一番熱い決済APIである、Stripeを利用してみたのでまとめます。 おしゃれな公式サイト https://stripe.com/jp 前準備 Stripeのアカウントが必要なので、取得してダッシュボードが見える段階まで行っておいてください。 ダッシュボードのAPIから、Publishable keyとSecret keyを控えておいてください。 実装 はじめに Stripeでいう、Subscriptionは「定額課金」になります。 Subscription = Customer + Plan とあるCustomer(顧客)が毎月千円のPlanに登録すれば そのCustomerは毎月千円を課金するというSubscripti

Livesenseその2 Advent Calendar 2016 - Qiita の24日目の記事です。書いてる今は既に25日ですが(；・∀・) ApolloというGraphQLクライアントライブラリを使ってGraphQL APIを利用するためのサンプルコードを解説します。 というのも、Apolloにもサンプルコードがあるのですが、自分でサーバー立てたりする必要もあり、中々面倒でした。ですので、手軽にGithubのGraphQL APIを使うことで、雰囲気を掴めるかと思います。 GraphQLとは？ GraphQL入門 - 使いたくなるGraphQL - Qiita にこの辺は書いてありますので、ご参照ください。 ソースコード 動かし方はInstallationに書いてあるとおりなのですが、前提として、前述のGithubのEarly Access Programにサインアップしておき、C

AWS AmplifyをReactに組み込んでユーザー認証まわりをいい感じにする なんかいい感じのがあったので試してみた。 https://github.com/aws/aws-amplify Reactプロジェクトのセットアップ 何はともあれReactプロジェクトがなければ話になりません。 Crea […] なんかいい感じのがあったので試してみた。 https://github.com/aws/aws-amplify Reactプロジェクトのセットアップ 何はともあれReactプロジェクトがなければ話になりません。 Create React Appでサクッと作っちゃいます。 $ mkdir amplify-react $ cd amplify-react $ create-react-app ./ ※ npm install -g create-react-appでCreate Reac

はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

概要 Reactでルーティングをするためのライブラリであるreact-routerのv4の基本的な使い方を覚えるために、簡単なwebページを作ってみます。 react-routerのv4というと、v2やv3から破壊的な変更があり、かなり使いやすくなったとの評判なのですが、私はv4以前のreact-routerを使ったことはなかったので、この記事には過去のversionとの比較という観点はありません。初めて使う人が、ルーティングの概念やreact-routerの使い方がわかるチュートリアルになれば良いなと思いながら書きました。 方針としては、とにかくシンプルに小さなwebページを作ることにします。複雑な動作やサーバーとの通信はしませんし、cssもほぼ書きません。この記事はreact-routerを勉強し始めた当日に書いているので、間違っている内容があるかもしれません。ご指摘ください。 なぜr

react-intlを使って React アプリを国際化してみたところ、結構良かったので紹介します。 tl;dr react-intl を使った React アプリの国際化方法 react-intl を component だけではなく、utility function として使う方法 react-intl とは react-intlは、React アプリの国際化を支援するための Component と幾つかの API を提供する、Yahoo 製のライブラリです。 メッセージだけではなく数値(通貨も含む)、日付など幅広く対応しています。 今回は、メッセージの部分に特化して紹介します。 基本的な使いかた 基本的な使い方は、次の 3 ステップです。 国際化する context を設定する 言語設定ファイルを設定する(もし必要であれば) react-intl が提供する Component(Fo

その他にReactにenzymeを連携させるためのenzyme-adapter-react-16や、Jestのスナップショットを行うためのreact-test-renderer、Jestでenzyme-matchersを使用するためのjest-enzymeなどが状況により必要となります。 なお、create-react-appを使う場合は、デフォルトでJestが組み込まれており、特にBabelなどの設定を行う必要はありません。enzymeについては、別途インストールが必要です。 JestについてJestはテスティングフレームワークです。以下のような特徴があります。 JestはJasmine 2をベースに作られていて、JasmineのMatcherがそのまま使えます。Facebook製でReactのイメージが強いですが、他のフレームワークなどでも普通に使えます。Node.js上のjsdomで

最小限の設定のTDD手法を使い、「何をテストすべきか？」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。それでも、コンポーネントをどうテストするのが最善なのか、よく分からないかもしれません。どこから始めるのでしょう。具体的には何をテストすればよいのでしょうか。 いくつかのReactコンポーネントは簡潔過ぎて、そもそもテストが必要なのかすらはっきりしません。 AngularからReactに乗り換えた 人なら、テストには愛憎のような思いがあるかもしれません。 確かに Angular にはテストを支援するツールがたくさんありますが、同時にテストを書くのが難しくなる可能性があります。冗長ながら省略できない定型コードが多々ある上、 $digest の呼び出

React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.

You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If

最近はいろんなところで React アプリケーション(もちろん React とは限らないが)での SSR について語られることが多くなっていると感じる。 僕も個人の趣味プロダクトで Express サーバーで React コンポーネントをレンダリングするみたいなのをやったことがある。 で、その感想としてはとにかくめんどくさい。 SSR したい目的って SEO だったり OGP だったりみたいなクローラーに対しての表示か、もしくは初期表示の高速化の2つくらいだと思うんだけど、その目的に対する解答として SSR の自前実装はコスパ良いのかって考えるとなんとも微妙なところ。 特にネックなのが react-router で、バージョンが上がるたびに破壊的な変更が入ってアプリケーションが壊れるわけだけれど、その対応がクライアントのルーティングだけじゃなくて SSR の部分でもやんなきゃいけないのがと

対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS Sierra 10.12 Node.js v6.6.0／npm 3.10.3 React 15.4.0 Node環境が準備できていない方は別途インストールしてください。Mac環境であればnodebrew、Windows環境であればnodist等のバージョン管理ツールの利用をおすすめします。 Reactの主な特徴 ReactはUIを構築するためのFacebook製オープンソースJavaScriptライブラリです。 2011年にFacebookのニュースフィードにデプロイされて以来、Instagram、Airbnb、Netflix、Paypal、Uberなど数々のアプリケーションで活用されています。Reactの公式サイトには

Facebookが提供しているJavaScriptライブラリ・React.jsは「Yahoo!」「Airbnb」「Reddit」「Netflix」などで採用されています。 日本でも注目され始めているので、React.jsを使ってみたい方は多いのではないでしょうか。 これからReact.jsを学ぶ方の参考になるReact.jsの入門資料（サイト・記事・スライド）を12個ご紹介します。 他のJavaScriptフレームワークからReact.jsに乗り換えようか迷っている方の参考になる資料も紹介しています。 React.jsの学習の参考になるサイト・記事 今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference / HTML5 Expert.jp https://html5experts.j

いまさらですが、React + Redux + ant-design ではじめてみました。 普段は、フロントエンドはAngularを使って開発することが多いのですが、せっかくの年末の長期休みに普段触らないものを触ろうと思い、まだ触ったことがなかったReact, Redux, そして、最近Alibabaのant-designが良いらしいという情報を聞いたので試してみて、所感をまとめてみました。 現状での 完成版のコード になります。 (Google Map APIと、楽天トラベルAPIを使って、ロケーション情報の近くのホテルを探す検索WEBページ) Reactを触ってみようと思った理由 Angular 2/4が狭量で遅すぎる理由 Googleの開発者達が離れたこと（それぞれ独自のフレームワーク、VueとAureliaを開発） Angularは冗長である。 「Angularは大型チームに最適」