React JSX 三項演算子で Left side of comma operator is unused and has no side effects なエラーにハマる

React JSX

危機管理〜 JSX内でコンポーネントを出し分けしようとしてハマったのでメモダメだったコード function App( isAdmin ) { return ( <> {isAdmin? ( <AdminMain /> <AdminAside /> ) : ( <Main /> <Aside /> )} ); } エディターのシンタックスハイライトで次のようなエラーが表示されていた Left side of </aside></main></adminaside></adminmain>…

2019-09-19

React create-react-app でプロジェクトを作成できないにハマる

React JavaScript node.js

$ npx create-react-app my-app で、Reactのプロジェクトを作成しようとしたけど、プロジェクトのフォルダが作成されてない現象になっていた。その時のログはこんな感じ $ npx create-react-app my-app ... yarn add v1.16.0 [1/4] Resolving packages... …

2019-09-12

React Hooks Jest + enzyme + act で useEffect を含むコンポーネントのテストする

React React Hooks Unit Test Jest enzyme JavaScript

react-create-app で作成した React Hooks を使ったアプリケーションのテストのメモ TL;DR 下書き途中にしたまま数ヶ月が経過してしまったので、少し情報が古くなってしまってるかもですが書きかけていた Jest + enzyme + act で React Hooks のテストをして…

2019-07-21

React JSX 親コンポーネントから子コンポーネントの子要素を出力したい

React JSX JavaScript

こんなの 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>

2019-07-02

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> …