これからはじめるReact HooksCreating an Effective Media Campaign and Attracting Event Sponsors
React Native + Expoで1年以上運用したCTOが集まってみた 前編 - KitchHike Tech Blog
こんにちは、エンジニアの Miho です！キッチハイクでは React Native でのアプリ開発が3年目を迎えましたが、みなさんは Expo についてどのような印象を抱いていますか？いざ、React Native でアプリ開発！と思って調べてみると、セットで紹介されていることが多いかと思います。 私自身、「Expo を使うとなんとなく開発が楽になりそうだな...🤔」という理解レベルでした。 ＊ キッチハイクは Expo を採用せず、素の React Native（Vanilla React Native）で開発しています。 Expo を採用して1年以上運用したCTOが、上野に集結 そんな、多くのエンジニアが気になっている「Expo 実際どうなの？」に答えてくれる、頼もしいCTO達がキッチハイクオフィスに集まってくださいました！非常に充実した2時間で、とてもひとつの記事にまとめきれず.
redux-sagaで非同期処理と戦う - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ReduxはSingle Store、immutableなState、副作用のないReducerという３つの原則を掲げたFluxフレームワークです。しかし他のフレームワークと違って提供しているものは最小限で、とてもフルスタックとは言えない薄さです。そのためすべてにおいて定番と言える書き方が定まっているわけでもなく、どうしようか迷ってしまうことも少なくありません。その筆頭とも言えるのが 非同期処理 の扱いです。コミュニティでは今でもさまざまな方向に模索が続いていますが、よく使われているものだとredux-thunk、redux-
react-redux v7.1＋TypeScriptでconnect, mapStateToProps, mapDispatchToPropsを撲滅する - 文系プログラマによるTIPSブログ
ついに例の定型文3兄弟を除去する事ができるようになりました〜 github.com 先日react-reduxがv7.1にアップデートされ、そこでhooks対応の関数がいくつか追加されました。 今回紹介するものは「useSelector」「useDispatch」の2つです。 react-redux v7.1の新機能 useSelector useDispatch connect関数は不要になる v7.1とそれ以前のコードの比較 v7.1以前のTypeScript + react-reduxのコード v7.1以降のTypeScript + react-reduxのコード 全部入りのサンプルコード 万能ではない点に注意 雑感 react-redux v7.1の新機能 useSelector ざっくり説明すると、mapStateToPropsをhooks対応したものです。 useSelecto
Expo CLI and SDK web support beta – Exposition
Nicolas Gallagher built RNW while also using it to create the Twitter Lite PWA. Major League Soccer, Flipkart, Uber, The Times, and DataCamp have all since built mobile web and desktop apps around RNW. We also consulted our friends at Facebook to get a second opinion on web support. When it came to building web support into Expo tools, we naturally gravitated towards RNW. Setting up react-native-w
React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた
Reactのhooks、すごいですよね。関数コンポーネントの自由度があがって色々実現できそうです。 私はReactについては2年ぐらい知識止まってるので、かなり衝撃的でした。ContextとかSuspenseとかいろいろ増えてて今更追いつくのは難しいけど、hooksはちょっと使ってみたいなーと感じました。 そんなhooksですが、使い方はそこそこわかるけど動作原理がさっぱりわからなかったので、ちょっと調べてみました。 そもそもHooksってなに hooksは関数コンポーネントからReactのいろいろな機能をフックでき、自分で汚く実装するんじゃなくてReactが面倒見てくれるよーってやつです。useStateで状態を持たせることができ、useEffectでcomponentDidMountみたいなことを実現、あとほかにもuseXXX系がいろいろ、という感じです。 useStateを例に見てみ
React Nativeの光と闇
This document summarizes a talk about React Native. It introduces React Native, how it allows building native mobile apps using JavaScript and React by compiling to native code for each platform. It demonstrates a simple React Native app, and discusses how React Native uses the Virtual DOM for efficient updates. It also outlines some benefits of using React Native like write once, use anywhere acr
ブログのReactを16.8にあげてReact Hooksで書き換えてみた - mottox2 blog
2019/02/06にReact16.8がリリースされ、16.7のalphaから入っていたReact Hooksが安定版にやってきました。 そこで今回このブログで使われているReactを16.8に上げて、ステートフルなコンポーネントをReact Hooksを使いFunction Compoenentに書き換えてみました。 React Hooksの解説をした記事はたくさんあると思うので、今回は書き換えてどう変わったかを見ていきましょう。 該当する部分はHeaderの検索フォームです。 プルリクエストだけ見たいかたはこちら。 https://github.com/mottox2/website/pull/39 > 書き換えのポイント書き換えのポイント > stateの書き換えstateの書き換え これはいろんな記事で言及されているuseStateを用いて書き換えます。 useStateに初期値
実践: React Hooks - mizchi's blog
hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま
雰囲気でやってる人向けの Redux 再入門
ng-kyoto Angular Meetup #9 での発表資料です。 https://ng-kyoto.connpass.com/event/113358/
Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発
React Nativeの本番導入を検討するすべての方へ｜ggtmtmgg｜note
この記事は、React Native(Expo)を使ったアプリ開発を検討中の方に向けて書いています。 ちなみに、ExpoはReact Nativeを更にラップして、開発からリリースまでをスムーズにするやつです。 1. FACTBASEでReact Native採用を決めるまでFACTBASEではプロダクトのコアコンセプトの検証の段階でReact Nativeを採用し、開発を始めました。 採用を決めた主なポイントは以下です。 ・AirbnbなどフルReact Nativeっぽいアプリがいい感じで動いている ・カスタムモジュールを使えば極論デバイスのすべての機能にアクセスできる ・社内にアプリ開発に関する技術スタックがない ・Swift/Kotlinエンジニアの採用後にピボットしてアプリ開発やめたらまずい 以上を踏まえつつ、最強のUXを求めるフェーズで、Swift/Kotlinで書き直すんだろ
スマホ向けサイトをアプリっぽく見せるために半年間頑張ったことをまとめる - Qiita
この記事は リクルートライフスタイル Advent Calendar2018の20日目の投稿です。 はじめに この記事では スマホ向け web ページをアプリっぽく見せるための Tips を多く紹介します。 (CSS / JS / jQuery / React / WebGL の事例を紹介します) （注） React 環境でのサンプルコードが多めですが、実装方法はどの環境でも変わらないと思います。ライブラリも同種のものが存在しているはずです。 最近だと、僕の大好きなアプリで味わった体験を、どうすれば Web で再現できるかなーって考えていました。そうしたネイティブアプリをWebで模倣したときに、知ったTipsやテクニックをまとめていきます。 この記事に書いてあること アプリっぽい体験はどのようなものがあるか CSS / JS / jQuery / React / GLSL を利用したネイテ
React Hooksの概要 - Qiita
Hooksは、classを記述せずにstateやその他のReactの機能を使えるようにしたもので、今は提案段階です。RFCはこちら 現在はReact v16.7.0-alphaで試せます。 Hooks導入の動機はこちら https://qiita.com/tatane616/items/9d667e32b6f82f9f7a9f State Hook よくあるボタンを押すとカウントが増えていくサンプルです。 import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times
【React】新機能hooks - Qiita
はじめに 会社で色々な事件に巻き込まれしまってなかなか書けなかった不幸な日々でした。 ちょっと乗り遅れた感あるんですが、自分の勉強と理解がてら新しい機能であるhooksを書いていきます。 hooks hooksはclassを書くことなくstateとか、色々な機能を使うことができる新しい機能です！React v16.7.0-alphaから使えます。 create-react-appでつくると、僕がやってみたときは16.6だったので、ちょっとアップデートしないとできないので注意です。 そして、かつてはSFCと呼ばれる関数定義のコンポーネントたちも、ここではSFCではなくFCになります。 なにせstatelessではないからね・・・！！。 state この機能を使うと、functional componentがstateを扱えるようになります。ちゃんとre-renderされようとも値を保持してく
React NativeアプリでE2Eテストを回してみた
東京Node学園祭 2017 Nov 25 React Nativeアプリで「E2Eやってみよう」と思い実行に移した話 E2Eテストやってみようかな、と思っている人を想定
Reactで開発するチームが共通認識しておきたい重要な概念 - KitchHike Tech Blog
SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記（はてブコメントより） Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before
React製のSPAのパフォーマンスチューニング実例
カギは社内事例にあり！？システム効率化を超えて運用ミスを激減させた件 2024.09.02 コーポレート 業務改善 業務設計 社内ICT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 副作用分割パターン - mizdra
Recomposeとは何だったのか、またはHooksが開けたパンドラの箱についての考察 / Recompose Funeral March - Speaker Deck
