JavaScript, React   なスペースのあるHTMLのテスト

JavaScript HTML JSX React Unit Test Jest enzyme

HTMLで時々見かけるやつ。     Non-Breaking Space 文中で折り返しさせたくない語句を繋ぐ時に使う特殊文字。 JavaScript で   が含まれるHTMLを扱う時のトラップコンポーネント時代の昨今だとJSXとかJavaScript内にHTMLを書いたりすること…

2019-07-01

React Jest + enzyme 'equal' of undefined になる

React Jest enzyme JavaScript Unit Test

React で作ったアプリを Jest + enzyme でテストしている時にTypeError: Cannot read property 'equal' of undefinedというエラーになったのでメモ enzymeのAPIリファレンスを見ながらこんなテストを書いていました。 describe("App", ()=> { const app = sh…

2019-05-27

React create-react-app したプロジェクトで stylus を使いたい

React webpack stylus CSS

React のプロジェクトを作る時に create-react-app とても便利です。しかしWEBアプリを作ると時に避けて通れないのが CSS 。 create-react-app のデフォルトではプレーンなCSSなので、コンポーネントごとにCSSを書けるとはいえチョット面倒です。せっかくな…

2019-05-16

React JSX の中で if で分岐させたい

React React Hooks JSX JavaScript

React のアプリで例えば編集モードの時にはフィールドで、そうでない時はテキストを表示するなど、条件によって表示を変えたい時など JSX 内で分岐をさせたい場合とか。ふと思った。 JSXの中でif文使いたい場合って何がスタンダードなんだろう？JSXの中で {…

2019-05-09

React Hooks 親コンポーネントから子コンポーネントをのDOMを ref を使って触りたい。

React React Hooks JavaScript

React Hooks を使ったアプリでボタンの状態やフィールドへのフォーカスなど ref を使った操作を、そのボタンやフィールドの親コンポーネントから呼び出したい時のメモ。日本語が不自由なのでサンプルを例えばボタンを押した時に非同期処理をするから、処理…

2019-05-06

React JSX className に変数と固定値を混ぜて使いたい

React JSX JavaScript ES2015 (ES6)

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> ); } テンプレート構文 …

2019-04-01

React JSX コメントを書きたい！

JSX React JavaScript HTML

ReactのJSXでコメントを書く方法のメモ JSX Comment JSXの{ }の中はJavaScriptが動作するので{ }で囲ってコメントを書くことができる {/* 一行コメント */} {/* 複数行コメント */} // も使えるが{ }の閉じタグの前に改行が必要。 {// 一行コメント } 改行…

2019-03-23

React 複数のタグを返して render したい

React JSX JavaScript

ReactのJSXで複数のタグを返すコンポーネントを作りたい時 JSXはルートが1つのタグでないとエラーになる例がアレだけど、これはエラーになる function ListData() { // トップの改装に複数のタグあるとエラーになる return ( <li>星宮いちご</li> <li>霧矢あおい</li> <li>紫吹蘭</li> …