React Hook Form + yup によるフォーム実装あれこれ - vivit engineering blog
はじめに vivit株式会社でフロントエンドエンジニアをしている氏家です。 私は現在、アウトドア用品の中古品買取と販売を行うhinataリユースの内製システムの開発に携わっています。 www.hinatareuse.jp システムはNext.js + TypeScriptにUIコンポーネントライブラリのAnt Designを導入して開発されています。 このシステムに買取商品の情報を入力するフォームを実装する際、フォーム周りのステートやロジックをAnt Designに持たせたくないという意向があったので、React Hook Formを導入しフォームのステート管理やバリデーションを任せることにしました。 このReact Hook Form、yupを使用したスキーマバリデーションをサポートしていたり、UIコンポーネントライブラリが提供する制御されたコンポーネントにも対応していたりと、使い勝手が
Next.jsにstyled-componentsを導入する - hiro08gh
こんにちはかみむらです。もしReactベースのフレームワークで、スタイルを構成する場合はCSS in JSライブラリを検討する思います。特に人気なのが、styled-componentsです。最近では採用しているプロダクトが増えてきています。 自分もstyled-componentsを利用する一人ですが、Next.jsで導入する場合少し癖があったので備忘録として残しておきます。 ドキュメント styled-components: Documentation 前提 TypeScriptベースで話を進めていきます。 Next.jsにTypeScriptを導入する記事はこちら code-log.hatenablog.com styled-componentsのインストール まずは、ライブラリをインストールします。 $ yarn add styled-componentsそして、TypeScrip
ReduxのReducerはなんでReducerと呼ばれているのか - gaaamiiのブログ
Reduxのreducerはなんでreducerなのか、そもそもreducerってなんだ、みたいなことを調べたので書きます。間違ったこと書いてたら直します。 背景 Reduxでは、reducerってやつが状態の変更方法を知っています。reducerはReduxのドキュメントに以下のように書いてある通り、 https://redux.js.org/basics/reducers The reducer is a pure function that takes the previous state and an action, and returns the next state. 状態とアクションを受け取って、次の状態を返すやつです。 しかし、reducerという言葉はどういう意味なのでしょう。「状態とアクションを受け取って、次の状態を返すやつ」を、なぜreducerと呼ぶのでしょう。 W
GraphQL の Fragment でコンポーネントの見通しがよくなった話 - vivit engineering blog
vivit株式会社でフロントエンドエンジニアをしている関です。 新型コロナウイルス感染症(COVID-19)への対策として発出された緊急事態宣言の影響で、弊社も2ヶ月ほどリモートワークとなり、私も駆け足で自宅に作業環境を構築しました。買っちゃいましたL字デスク。 さて、弊社ではいくつかのプロダクトのフロントエンドに React(Next.js) + TypeScript を採用しており、バックエンドとの通信には GraphQL(Apollo) を採用しています。 今回はその中で、コンポーネント分割をする際の GraphQL Query の定義と取得したデータの受け渡しについて話をします。 ここからは GitHub GraphQL API v4 を使って説明していきます。 developer.github.com アジェンダ pages から components へのデータの受け渡し方法に
Next.jsにstyled-componentsを導入 - Qiita
この記事は下記のことについて書きます。 Next.jsにstyled-componentsの導入方法 Next.jsのbodyにglobalなcssの設定方法 参考にした記事はこちらになります。 styled-componentsを使ったCSS設計 これからのReactのスタイリングにはStyled Componentsが最高かもしれない Global styles and layouts styled-componentについて 「これからのReactのスタイリングにはStyled Componentsが最高かもしれない」に書かれているとおりになります。 cssの定義を、class属性を利用してカプセル化して再利用しやすいようにするための仕組みです。StyledComponentsもこの流れではありますが、外部cssファイルではなくjsxファイルに定義するためそのファイル内でReactコ
React/Redux約三年間書き続けたので知見を共有します | Enigmo Life
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
Tutorial: Tic-Tac-Toe – React
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How To Call Web APIs with the useEffect Hook in React | DigitalOcean
How to integrate Mapbox GL JS in your Next.js Project without react-map-gl or a React wrapper library
Snopkowski.com
Making Next.js and Mapbox GL JS get along
GitHub - leerob/next-mapbox-demo: 🌎 Creating a non-SSR map component inside a Next.js project.
tortilla.academy | A React based Whatsapp clone
Real World Virtual DOM