Creating a React Component Library using Rollup, Typescript, Sass and Storybook
At work we have a number of front-end projects that are worked on by different project teams. Each of these projects are designed by our internal designer and had a lot common with them (same inputs, buttons designs etc). Up until now, we had no shared style-sheets or components. Components across projects were created from scratch, rewritten or copy pasted over each time. I saw a real need for an
結局 React のコンポーネントにはどうやって型をつければ良いのさ - kk-web
React TypeScript Cheatsheet の Useful Patterns by Use Case の Wrapping/Mirroring に答えが書かれていました。 自分は function でなく const で作成することが多い(どっちが良いんですかね？)ので、以下のように書くのが良さそうです。 import React, { ComponentPropsWithoutRef, FC } from "react"; export type ButtonProps = ComponentPropsWithoutRef<"button"> & { specialProp?: string; }; const Button: FC<ButtonProps> = ({ specialProp, ...props }: ButtonProps) => { console.lo
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
【感想】『りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版』【Ⅰ. 言語・環境編】： #りあクト で最強React入門 - Rのつく財団入り口
りあクト！ でReact再入門 しばらく前のエントリで書きましたがReact＋TypeScript回りを学んだので、一緒に読んだ本の感想エントリです。技術同人誌界隈では非常に高評価、なんと累計1.5万部も売れた3部構成のReact入門書。作者はフリーランスのエンジニアの大岡由佳さん。 React推しの技術同人誌なので前書きからすでにアツく、最近はVue.jsが採用されたり書籍が多いのにもどかしさを感じたり、実際のプロジェクトで見てきたひどいコードをもっと良くしたいと思った…などなど、現場のエンジニアの技や思いがたっぷり詰まっています。ReactってJavaScriptぢからの高い優秀な人が使ってそうな勝手なイメージがあったのですが、そうではない場合もあるのですかねえ。 技術が出てくる経緯、歴史と思想にも踏み込み、仕事で使えるReact本を目指したとのことで、実際にそれを実現した本となってい
Next.js に入門するのに便利な create-next-app の with-typescript テンプレート - kakakakakku blog
最近 Next.js Learn を使って Next.js に入門した．今度は Next.js でプロトタイプを実装しながら学ぶため，プロジェクトの初期構築として create-next-app を使うことにした．少し調べたところ，create-next-app はもともと Segment 社で実装されて，現在は Next.js を管理する ZEIT 社に譲渡されている．さらに2019年10月に再実装された create-next-app もリリースされている． nextjs.org with-typescript テンプレート create-next-app にテンプレートを指定するオプションがある．試しに Next.js と TypeScript 組み合わせた with-typescript テンプレートを指定したところ，Next.js を学ぶのに便利な構成になっていた．Next.js
Top three React & TypeScript pitfalls
The usage of React & TypeScript exploded in recent years. This should not come as a surprise to anyone at this point. Both tools proven to be viable working on web application large and small allowing developers to satisfy various business needs. With the explosion of popularity comes also the explosion of mistakes that engineers can make while working with this stack in their day-to-day jobs. Thi
Reactの標準機能（useContext/useReducer）でステート管理[TypeScript版]
Reactの標準機能（useContext/useReducer）でステート管理[TypeScript版] React HooksのuseContext/useReducerを使用して、ステート管理する方法をご紹介します。 投稿日2020年09月13日 更新日2020年09月13日 useStateだけの場合 よくあるカウンターコンポーネントを作ってみます。 useStateでカウントを更新できるようにしています。 import React, { useState } from 'react' const Parent: React.FC = () => { const [count, setCount] = useState(0) return ( <div> <h1>カウント: { count }</h1> <button onClick={() => setCount(count +
![Reactの標準機能（useContext/useReducer）でステート管理[TypeScript版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a30174b13b59e7f3dd471819be977e4692229a1e/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2018%2F08%2Freact-icon.png){kind=tracking}
TypeScript: ReactのContextに型をつける(useContextと16.3以前のLegacy Contextも含む) - dackdive's blog
TypeScript + Reactでコンポーネントを書くとき、Context を使っているコンポーネントに対してどう型を書くのが正解か迷ったので、調べたことをメモしておきます。 調べるきっかけとなったコンポーネントは React 16.3 以前の Legacy Context を使った書き方になっていたのですが、ついでに新しい Context での書き方と、最新の Hooks の useContext() を使った場合も調べます。 なお、Context および useContext() についての説明は公式ドキュメントに譲ります。 コンテクスト – React Legacy Context – React フック API リファレンス – React 目次 目次 Contextを使う前のサンプルコード 1. React 16.3 以降の Context を使う場合 2. React 16
「Redux よさようなら」最強の React 実装
useState, useContext を使った状態共有 graphQL BFF + Codegen + Apollo Hooks で型安全なデータ取得 Redux の型定義、Loading 状態の運用、エラー処理、等々煩雑なコードがなくなる 1日一つ強くなる中西とは https://ja.reactjs.org/ React 日本語公式ドキュメントのトップページの翻訳を担当 Apollo Japan User Group 主宰 / 公式ドキュメントチュートリアルを翻訳しました Hasura Japan User Group 主宰 / チュートリアル公開しています JavaScript が中心となった生産性の高い Web App 開発チームの運用、及びその普及活動が今のテーマ => https://apollographql-jp.com/makeMoneyTS/ 毎月 JavaScri
React17におけるJSXの新しい変換を理解する
今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記法がJSXです。 const Foo = () => { return <div> <p id="a">I am foo</p> <p key="b">I am foo2</p>> </div>; } これらは純粋なJavaScriptではないため、そのままでは実行できません。そのため、何らかの方法でただのJavaScriptに変換する必要があります。現代では、それを担うのはBabelやTypeScriptです。これらによって、上記のJSXを含むコードは次のように変換
Reactの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（ブラウザ環境） ブラウザ環境 ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境
TypeScriptの型におけるJSXサポートが100%分かる記事 - Qiita
TypeScriptはJavaScriptに静的型を付けることができるAltJSです。2015年9月に登場したTypeScript 1.6ではJSXのサポートが搭載され、.tsxという拡張子を用いることでJSXを含むコードを書いたり型チェックしたりすることができます。 JSXはJavaScriptに対してHTML（あるいはXML）のタグのような構文を導入する拡張記法です。以下の例のようにJavaScriptプログラム中に式としてタグを書くことができます（https://facebook.github.io/jsx/ から引用）： // Using JSX to express UI components. var dropdown = <Dropdown> A dropdown list <Menu> <MenuItem>Do Something</MenuItem> <MenuItem>
JSフレームワーク事情2020年始め｜erukiti
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
ReactをTypeScriptで書く2: 設定、d.ts編 | dkrkのブログ
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve" }, "include": [ "src"
Documentation - JSX
JSX is an embeddable XML-like syntax. It is meant to be transformed into valid JavaScript, though the semantics of that transformation are implementation-specific. JSX rose to popularity with the React framework, but has since seen other implementations as well. TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript. Basic usage In order to use JSX you must do two t
create-react-appでTypeScript用のReact開発環境を作る(入門者向け) - Qiita
React Advent Calendar 2016 に空きがあったのでねじ込みました。 仕事ではないけど普段はAngularでフロントエンドを書いています。ちきさんです。 関数型ReactでビジュアルFizzBuzz があまりにも読みやすいソースコードで、読んでるうちに僕もReactが書ける気がしてきたので挑戦してみました。 ところでAngularにはangular-cliという環境構築ツールがあります。 オレオレ環境構築は過去に散々やってきたので、またReactでオレオレは嫌だなと思っていたらツイッターで facebookincubator/create-react-app の存在を教えていただきまして、使ってみたらあっさり環境が出来上がったのでワオと思ったのですがコレ当然なんですけどJavaScript用の環境なんですね。 そのままではTypeScript脳の僕には使えないので仕方な
TypeScriptでReactを書く – webpackを使った開発環境の構築方法
2017年に入りTypeScriptがだいぶ熱くなってきています。特に以下の2つのニュースはTypeScriptの使用について大きく後押ししてくれるものとなったかと思います。 Googleが社内の標準言語としてTypeScriptを追加SlackでのJavaScriptからTypeScriptへの移行こうした動きを受けて、私もTypeScriptへの移行を模索し始めました。今回の記事では、私が現在最も書く機会の多いReactをTypeScriptで書く環境の構築方法を紹介したいと思います。 はじめにTypeScriptは、言わずもがなMicrosoftが開発する静的型付けに対応したJavaScriptのスーパーセットです。 ReactをTypeScriptで書くメリットは、このTypeScriptの静的型チェックをReactの開発に導入できることです。特にReactでは、コンポーネント間で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Debugging Cordova App with Webpack sourcemaps
React のユーザーから見た今後のフロントエンドの予想