Storybook(CSF3.0)でdefault exportではないコンポーネントを追加したいっ！(React)
サンプルが雑ですが、hoge.tsxにはHogeとFooがあって、Hogeはexport defaultです。 export default Hoge = () => { render <>Hoge</>; } export Foo = () => { rende…
React.js
componentDidMount / componentWillUnmount を useEffectで書き換えたいっ！
そもそもjsで書いてたコードをTypescriptにしないと行けないところですが、とりあえずHooksへの書き換えをメモ程度に。 componentDidMount componentDidMount() { console.log('mount!!'); } マウントされた時に何かしたいやつですが…
React(TypeScript)でコンポーネントのtypeを別のコンポーネントで使いたいっ！[ComponentProps]
とあるコンポーネントのPropsで指定しているtypeを使いまわしたい時にComponentPropsを使うのを忘れそうなのでメモ。 const Hoge: React.FC<{ id: number }> = ({ id }) => { return <>{id}&l…
useEffectのよくやるパターンをメモっ！
componentDidMountの置き換え componentDidMount() { getHogeList(); } mount時にデータ取得するようなやつ。 useEffect(() => { getHogeList(); }, []); 二つ目の引数に空のArrayを渡すと最初のre…
ReactでonClickをネストにしたいっ！
やりたいことをコードで書いてみたけど、これ何の為に必要なのかよくわからんなｗ render ( <a onClick={e=>{ console.log('parent!!'); }}> 外側 <span onClick={e=>{ console.log('child…
react-i18nextのuseTranslationをTranslationコンポーネントに書き換えた話
ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。 (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるMyComponentがこちら import React from 'react'…
ReactのWarningをなんとかしたいっ！
Warningが気になったので修正していきます。 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from co…
Reactのonclickに引数を渡したいっ！
普通に引数が無い場合は、 clicked() { console.log('click!!'); } render () { <div> <a onClick={clicked}>リンク</a> </div> } これで、クリックした時にclicked…
jsxでコメントアウト
前に作ったMessageクラスですが、、 var Message = React.createClass({ render: function() { return ( <div className="message"> <h2 className="…
react.jsで別のComponentへのアクセス
htmlは以前用意したもの(Hello, React.js!! まずは何か表示してみる。)をそのままで。 var Message = React.createClass({ render: function() { return ( <div className="message&q…
React.jsでコンソールに”Download the React DevTools for a better development experience”って出るやつ。
Chromeのconsoleに出てるんですが、これ出っ放しなんかな・・？と思ったんですが、、 Download the React DevTools for a better development experience: http://fb.me/react-devtools そもそも読み込んでた…
jsxでwatchの拡張子を指定する
jsx --watch react static/dest って感じでコンパイルしようとすると、react以下の*.jsしか見てくれないんですが、 jsx --watch react static/dest -x jsx って感じで"-x"をつけてやると、*.jsxが対象になる。 そもそも、"--w…
Hello, React.js!! まずは何か表示してみる。
用意したhtmlは以下。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Hello, React.js</title> <sc…
React.js事始め。react-toolsをインストールしてみた。
jsxで書いてjsにコンパイルするのが一般的？なようなので、まずはjsxのコンパイル環境を作りたいと思います。 node.js + npmはすでにインストール済み。 やり方的には、(CentOS6.3にnode.js(v0.10.0)をインストールしてみる。)この辺りと変わってないと思います。 では…