タイトルの通りですが、 export default function Hoge() { return ( <h1>ほげほげ</h1> ); } 上記のようなコンポーネントを普通にimportすれば import Hoge from './hoge'; で、lazyを使ったと…

例えばscrollの位置を保存するような処理を書こうとすると、連続してイベントが発生してしまって処理が無駄に行われる場合があります。 const = useState(0); // heightが変更された時 useEffect(() => { // 保存する save(height); },…

サンプルが雑ですが、hoge.tsxにはHogeとFooがあって、Hogeはexport defaultです。 export default Hoge = () => { render <>Hoge</>; } export Foo = () => { rende…

そもそもjsで書いてたコードをTypescriptにしないと行けないところですが、とりあえずHooksへの書き換えをメモ程度に。 componentDidMount componentDidMount() { console.log('mount!!'); } マウントされた時に何かしたいやつですが…

componentDidMountの置き換え componentDidMount() { getHogeList(); } mount時にデータ取得するようなやつ。 useEffect(() => { getHogeList(); }, []); 二つ目の引数に空のArrayを渡すと最初のre…

やりたいことをコードで書いてみたけど、これ何の為に必要なのかよくわからんなｗ render ( <a onClick={e=>{ console.log('parent!!'); }}> 外側 <span onClick={e=>{ console.log('child…

ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。 (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるMyComponentがこちら import React from 'react'…

Warningが気になったので修正していきます。 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from co…

普通に引数が無い場合は、 clicked() { console.log('click!!'); } render () { <div> <a onClick={clicked}>リンク</a> </div> } これで、クリックした時にclicked…

前に作ったMessageクラスですが、、 var Message = React.createClass({ render: function() { return ( <div className="message"> <h2 className="…

htmlは以前用意したもの(Hello, React.js!! まずは何か表示してみる。)をそのままで。 var Message = React.createClass({ render: function() { return ( <div className="message&q…

Chromeのconsoleに出てるんですが、これ出っ放しなんかな・・？と思ったんですが、、 Download the React DevTools for a better development experience: http://fb.me/react-devtools そもそも読み込んでた…

jsx --watch react static/dest って感じでコンパイルしようとすると、react以下の*.jsしか見てくれないんですが、 jsx --watch react static/dest -x jsx って感じで"-x"をつけてやると、*.jsxが対象になる。 そもそも、"--w…