ReactのカスタムHooksをカジュアルに使ってコードの見通しを良くしよう
もはやReactにHooksのない生活は考えられず、私たちのReactコードの中には多数のHooksが使われています。 一方でその弊害として、使われているHooksが多すぎてコードが散らかり始めた人も多いと思います。Hooksは便利ですが粒度は小さく、プログラムの規模によっては多用しなければなりません。 そこでカスタムHooksの使用を勧めます。カスタムHooksを使うことでコードの見通しを良くすることができます。 カスタムHooksをカジュアルに使っていく カスタムHooksというと、どちらかというとReactの中では難しい部類に入ります。主に「使い方がわからない」「公式ドキュメントが不親切」「ネットの解説が難しい」あたりが問題になるでしょう。しかし難しい機能だからと言って難しく使う必要はなく、自分の使える範囲で自由に使えばいいのではないかと思います。 カスタムHooksは一般にロジック
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
React Context（useContext）入門
以前解説したReact ContextのHook版チュートリアルになります。ステートレスコンポーネントにおいては、こちらを使う方がシンプルになります。 React Contextとは Reactコンテキストを使用すると、親コンポーネントの状態変数をpropsを経由させずに引き渡すことが可能となります。シンプルかつ標準APIのため好まれています。 詳細を更に知りたい場合は、過去のContext記事を参照してください。 ベースとなるコード 例を作り上げていく形式で解説します。フォームに入力した数値がフォントサイズとして適用される例を考えてみます。 // index.js import React, { useState, createContext } from 'react'; import ReactDOM from 'react-dom'; function App() { const
React Hooksでデータを取得する方法 - Qiita
Robin Wieruch氏によるHow to fetch data with React Hooks?を著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-hooks-fetch-data/ このチュートリアルでは、ステートフックと副作用フックでデータを取得する方法を解説します。テック系の人気記事を取得するためによく使われるHacker News APIを利用します。また、アプリケーション内の任意の場所で再利用したり、スタンドアロンのnodeパッケージとしてnpmに公開したりできるデータ取得用のカスタムフックも実装します。 React のこの新機能が初見であれば、まずReact Hooks入門に目を通してください。完成したプロジェクトでReact Hoos でのデータ取得事例
useContextのしくみ - Qiita
Dave Ceddia氏による全5回におよぶReact Hooks入門記事の第5回を本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/usecontext-hook/ すべての新しいReact Hooksの中で議論中のテーマがあります。ほとんど全てが、ファンクションコンポーネントをクラスコンポーネント同等にするために存在しています。 useContext フックは少し違っています。仕事をよりラクにしてくれるだけのものです。 ReactのContext APIを知らない方のために補足しておきますと、アプリケーション内深くまでデータを渡す方法、それも手動で複数階層にまたがってバケツリレーをせずに済む方法です。データを引き回すことさえできれば良いという時には、Reduxのようなツールの代替手段として機能
React Nativeの実は使ってはダメなライブラリ素晴らしいライブラリ(随時更新) - Qiita
ダメなライブラリ。 redux reduxはstate管理の素晴らしいライブラリだ。 世界で一番愛用され、情報量も多く、大規模システムに向いている。 しかし、react nativeを採用するのはほとんどがスタートアップだ。 学習コストが高い＋プロトタイプ制作が苦手なreduxはスタートアップにははっきり適さない。 reduxの代わりにcontext Api/MobXを使おう。Expo＋contextApi or MobX+web版のfirebaseがスタートアップでの最適解だと思う。 react-native-cli cliでなくExpoを使おう。cliはライブラリのアップデートの際に莫大な手間がかかる。要するにnativeライブラリのメンテナンスに手間がかかりすぎるので、Expoをオススメする。(スタートアップでは特に)私はcliもexpoも現在実務で使っているが、体感expoのが２倍
Reactを「webpack + babel-loader」でビルドする方法
自分はReactのビルドにBrowserifyを主に使用しており、昨年には『Reactをnpmでビルドする方法 browserify (watchify) + babelify編』という記事も書きました。ただ、ここ最近のwebpackの人気っぷりはすさまじいものがあり、「React + webpack」という組み合わせが今後のスタンダードになってもおかしくないという状況なので、今回はwebpackでReactをビルドする方法をまとめてみました。 webpackとは webpackは、browserifyと同様、複数のファイルの依存関係を顧慮してビルドを行うツールです。Browserifyとの大きな違いは、対象となるのがJSファイルだけでなく、CSSファイルや画像などに及ぶというところでしょうか。また最終的に生成するファイルも複数にわけることもできたりします。プラグインがすでに含まれていたり
【React Native】【Expo】Expoでプッシュ通知を送る - React Native Tech Blog
React Native + Expoでプッシュ通知を送る方法をご紹介します。 公式で it's almost too easy. と書かれている通りで、実装はとても簡単です。 ちなみにExpoベースのアプリでプッシュ通知を送る場合、このExpo公式のプッシュ通知を使う以外方法はありません。 例えば、Firebase Cloud MessagingやAmazon Simple Notification Serviceなどのサービスは使えません。 (2018/5/2訂正) Expo SDK 27からFirebase Cloud Messagingがサポートされるようになりました。 Expo SDK v27.0.0 is now available – Exposition プッシュ通知の実装 手順は大きく3つあります。 1. Expoのプッシュトークンを自分のサーバーに送る 2. Expoの
React v16.3 changes - blog.koba04.com
React v16.3.0 がリリースされました。 ※4/4 にバグフィックスを含む v16.3.1 がリリースされています このバージョンでは、基本的には v17 で有効化される非同期レンダリングへの対応が中心になっています。変更点は多いですが、ほとんどが機能追加であり破壊的な変更はないため、v16.2 から v16.3 へのアップグレードは比較的簡単じゃないかなと思います。 https://reactjs.org/blog/2018/03/29/react-v-16-3.html 当初の予定からはかなり延びたため、直前に発表された React Suspense の機能も入れるのかと思いましたが入りませんでした。まだ最終的な API は決まってないようなので今後に期待。 React Suspense については、v16.3 と関係ないので今回は省略します。 https://reactjs
MobXでReactのステート管理をする - Qiita
MobXはSimple, scalable state management を謳うステート管理マネージャ。 最近Hacker NewsやEchoJSで、にわかにMobXがフィーチャーされている。 3 Reasons why I stopped using React.setState — Medium この記事を読んで、そんなにいいもんかなと思い、試してみることにした。 mobxjs/mobx: Simple, scalable state management. カウンター 簡単なカウンターを作ってみる。一秒で1インクリメンタルされるやつ。 import ReactDOM from "react-dom"; import React from "react"; import {observable} from "mobx"; import {observer} from 'mobx-r
It’s all about time: Building a performant Stopwatch with MobX and React — fast
In recent posts we spoke a lot about developing React applications with Redux: It enables the users to easily make testable and structured applications. However, writing a Redux application produces a lot of boilerplate code. One framework alternative is MobX, which solves this problem by doing automation using observables. In this tutorial we are going to build a simple stop watch App step by ste
redux + react-navigation - Qiita
react-native+reduxを触り始めてそんなに経ってませんので備忘録 react-navigationのStateをreduxで管理しようという試みです。 公式リファレンスだとコードが一箇所にまとめられてて パッと見わかりづらかったのでメモ（自分だけ？） 1. Navigationのコンポーネントを作成 今回の例だとこんな感じ import { StackNavigator } from 'react-navigation'; import screens from './screens'; export default StackNavigator({ Splash: { screen: screens.Splash, navigationOptions: { header: null, } }, MainScreen: { screen: screens.MainScreen
2018 年 React と Redux のエコシステム総まとめ - Qiita
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
Reactを使って本気でアンケートシステムをつくった - Qiita
この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。 下記のような機能を備えています。 ページの作成 ページ内への設問の作成 複数選択肢 単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト 複数行テキスト 表形式 都道府県 説
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 | ランサーズ（Lancers）エンジニアブログ
@tsuyoshi です。先日行われた React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 と言うイベントで使ったスライドをアップロードしました。 https://pook.life/ と言うサービスをReact Redux の SPA で運用して得た知見などを共有できればと思い。公開してみた次第です。 内容としては 利用しているライブラリや開発環境、開発フロー コードベースでの実装例の紹介 その他 SPA サービスを運用する上での構成や知見 など、実例や結果を交えながら説明しています。 何かの参考になれば幸いです。 スライドを貼ってますが、以下のgoogle スライドで見た方が、アニメーションとか動いて見やすいかもしれません。 https://docs.google.com/presentation/d/1TIEg5rYJ9vlWTSO6etwupBBO0e
もうReactのフォームで消耗したくないので、HoCベースのフォームライブラリを作った - wadackel.me
2017 年。React のフォームに消耗しました。 いくつか良さそうなフォームライブラリはありますが、個人的に満足のいくものが無かったので、とあるプロジェクトで実装したものをベースにしてライブラリにまとめました。 作ったもの react-drip-form という、HoC ベースで React のフォームコンポーネントを構築するライブラリを作りました。元となるコードを書いている時、「さくっとフォームの実装を済ませてゆっくりコーヒーでも飲みてぇ…」という気持ちがかなり高まってたので、コーヒーを連想させる名前にしてみました。 wadackel/react-drip-form https://github.com/wadackel/react-drip-form ドキュメントのページでは、Create React App を使った Quick Start もあるので、さくっと試すことが出来ると
ReactはなぜFiberで書き直されたのか？Reactの課題と将来像を探る
先日行われたFacebookの開発者向けイベント「F8」で、React Fiberの発表が行われていました。 といっても、React関連の新しいプロダクトが発表されたというわけではなく、Reactが一から書き直されたということのようです。 ReactはなぜFiberで書き直されねばならなかったのか？Fiberが解決しようとした課題は何なのか？ その答えを聞くために、React Fiber現状確認というブログエントリで大変詳細にFiberの事を解説されていた小林徹 (Twitter: @koba04)さんに、実際のところを詳しく伺ってきました。 React Fiberとはなんなのか、そしてReactの将来像を探ってみます。 React Fiberとは？ 白石 React Fiberってなんですか？まずは概要を教えてください。 小林 Facebookが先日のF8カンファレンスで発表した、Rea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MobX
Containerどこに置く？
