React
React-router-dom を使っナビゲーションを作っていた際に下記の warning が表示されてしまいました。 React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spe…
SVGな画像を扱う時に、CSSやJSで色などをコントロールしたい場合、inline-svg にするのが扱いやすくて良いです。 create-react-app で作成した React のプロジェクトで eject せずに inline-svg を使えるように出来たのでメモ。 環境 "react": "^16.13.1" "r…
環境づくりの勉強がてら ReactHooks・テストは JEST + Enzyme で作っていたプロジェクトを TypeScript 化したメモ 1. TypeScript 化のパッケージをインストール して babel 関連のパッケージをアンインストール TypeScript 化するにあたって必要なパッケージ…
create-react-app を使わずに自分で独自に作成していたプロジェクトにテストとして Jest を導入したけど、テストコマンドを走らせると SyntaxError: Unexpected identifier が出てハマってしまったのでメモ。 構成 |- /tests | |- setup.enzyme.js | |- App.…
React のテストの定番 Jest + Enzyme の構成で、React 16.x 系だと Enzyme の Adapter を読み込ませる必要がり、今までは下記の用な感じで Adapter を読み込ませるファイルを作りテストファイルで都度 import をしていました。 setup.enzyme.js import Enzym…
APIからあるオブジェクトが渡され、フロントでデータが無ければデフォルト値を付けるような処理を TypeScript で書いていてハマったのでメモ。 ※ フロントは React です API から渡されるデータ InitUnitData = { first: { id: 1, name: '春風 わかば', type…
カルーセルとか横並びの要素の高さをReactで揃えたいような場合 (display: flex が使えないようなケース) 要素のそれぞれのDOMにアクセスして高さを取得して最も高いものを取得しなければならないので、リストのような Ref が必要になります。 また、ウィン…
input タグの onChange イベントとか、入力の度に state 変更して再レンダリングするのなんだかなーと思ってたので、イベントの処理を間引いて実行したいと思ったので色々調べながら作ってみました。 要件としては、イベントが発生した後に同じイベントが発…
useState の setter で値を更新しても即時 state に反映されるわけではないので、更新された state を使って別の処理を行いたい時などで意図しない動作になってしまうことがあります。 function Counter({ initCount }) { const [count, setCount] = useSta…
// Credit.js export function Credit({ character, singer }) { return ( <> <b>{character}</b> <small>song by: {singer}</small> ); } こんな感じのコンポーネントがあり、props を渡さなければデフォルトで character, singer を表示させたい 1. オブジェクトの引数を分割代…
全面ReactなSPAではなく、部分的にReactを導入しているようなサービスにモーダルとそれを表示させるボタンをReact Component で作ろうとすると次のような構成になるかと思います。 function ShowDetailByModal() { return ( <> <button onClick={showModal}> SHOW </button> <Modal /> ); } しかし、このよ</modal>…
VanillaJSなら DocumentFragment を作成してDOMに追加したい要素を溜めておき、appendChild( DocumentFragment ) で丸っと実際に表示されるDOMに追加することができる！
危機管理〜 JSX内でコンポーネントを出し分けしようとしてハマったのでメモ ダメだったコード function App( isAdmin ) { return ( <> {isAdmin? ( <AdminMain /> <AdminAside /> ) : ( <Main /> <Aside /> )} ); } エディターのシンタックスハイライトで次のようなエラーが表示されていた Left side of </aside></main></adminaside></adminmain>…
$ npx create-react-app my-app で、Reactのプロジェクトを作成しようとしたけど、プロジェクトのフォルダが作成されてない現象になっていた。 その時のログはこんな感じ $ npx create-react-app my-app ... yarn add v1.16.0 [1/4] Resolving packages... …
react-create-app で作成した React Hooks を使ったアプリケーションのテストのメモ TL;DR 下書き途中にしたまま数ヶ月が経過してしまったので、少し情報が古くなってしまってるかもですが書きかけていた Jest + enzyme + act で React Hooks のテストをして…
こんなの function Label(props) { // label で表示する要素を親コンポーネントで指定したい！ return ( <label htmlFor={props.htmlFor}>{ ◯◯◯◯ }<label> ); } function Input(props) { return ( <> <Label htmlFor={props.id}>推し</Label> <input id={props.id} defaultValue={props.dafaultValue} /> ); } <Label /> コンポーネントを別に作っておいて、子要素はHTMLみた…</label></label></label>
HTMLで時々見かけるやつ。 Non-Breaking Space 文中で折り返しさせたくない語句を繋ぐ時に使う特殊文字。 JavaScript で が含まれるHTMLを扱う時のトラップ コンポーネント時代の昨今だとJSXとかJavaScript内にHTMLを書いたりすること…
React で作ったアプリを Jest + enzyme でテストしている時にTypeError: Cannot read property 'equal' of undefinedというエラーになったのでメモ enzymeのAPIリファレンスを見ながらこんなテストを書いていました。 describe("App", ()=> { const app = sh…
React のプロジェクトを作る時に create-react-app とても便利です。 しかしWEBアプリを作ると時に避けて通れないのが CSS 。 create-react-app のデフォルトではプレーンなCSSなので、コンポーネントごとにCSSを書けるとはいえチョット面倒です。せっかくな…
React のアプリで例えば編集モードの時にはフィールドで、そうでない時はテキストを表示するなど、条件によって表示を変えたい時など JSX 内で分岐をさせたい場合とか。 ふと思った。 JSXの中でif文使いたい場合って何がスタンダードなんだろう？JSXの中で {…
React Hooks を使ったアプリでボタンの状態やフィールドへのフォーカスなど ref を使った操作を、そのボタンやフィールドの親コンポーネントから呼び出したい時のメモ。 日本語が不自由なのでサンプルを 例えばボタンを押した時に非同期処理をするから、処理…
ReactのJSXでクラス名を付ける時に変数と固定値な文字列を一緒に使いたいとき コレはうまくいかない return ( <button className="btn btn-${btnState}">BUTTON</button> ); 文字列結合する function Button() { const [btnState, setBtmState] = useState('primary'); return ( <button className={'btn btn-' + btnState}>BUTTON</button> ); } テンプレート構文 …
ReactのJSXでコメントを書く方法のメモ JSX Comment JSXの{ }の中はJavaScriptが動作するので{ }で囲ってコメントを書くことができる {/* 一行コメント */} {/* 複数行 コメント */} // も使えるが{ }の閉じタグの前に改行が必要。 {// 一行コメント } 改行…
ReactのJSXで複数のタグを返すコンポーネントを作りたい時 JSXはルートが1つのタグでないとエラーになる 例がアレだけど、これはエラーになる function ListData() { // トップの改装に複数のタグあるとエラーになる return ( <li>星宮いちご</li> <li>霧矢あおい</li> <li>紫吹蘭</li> …
React入門初心者マンとして引き続きエクセル的なモノを作るチュートリアルをやっています。 今回テーブルをソートしようとしてハマったのでメモ。 react: ^16.8.3 react-dom: ^16.8.3 リストのような配列から作られるエレメントには key を指定する V-DOMはD…
React入門初心者マンです。 Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門作者: Stoyan Stefanov,牧野聡出版社/メーカー: オライリージャパン発売日: 2017/03/11メディア: 単行本（ソフトカバー）この商品を含むブログを見る この本…
