この本「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」のログインをcurl叩きたかった。 TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発作者:手島 拓也,吉田 健人,高林 佳稀技術評論社Amazon ローカルでモックのjson-serv…

npm create @shopify/hydrogen@latest コマンドで作成できる。 hello worldかdemo選べるのでdemo選んで、 JSかTSかはTSにしてみた。 一応自分で書けるが、デフォルトはフォルダ名はhydrogen-storefrontになった。 ローカルで起動 どこからデータ取って来たの…

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発作者:手島 拓也,吉田 健人,高林 佳稀技術評論社Amazon P113の話、 ch03/next-sampleのnpm run buildで、 > next-sample@0.1.0 build > next build info - SWC minify release candidate enable…

Firebase をフロントエンドから適切に隠蔽するための「Hooks Injection パターン」 - JX通信社エンジニアブログ FIREBASE_CONFIGの設定 export FIREBASE_CONFIG='{"apiKey":"これ１","projectId":"これ２"}' これ１、これ２をFirebaseのconsoleからとる。 こ…

qiita.com

本当は怖いReact.memo - Qiita

https://qiita.com/jkr_2255/items/041f238a940f923e4dfc

Reactのスクロールパーツ https://codedaily.io/tutorials/8/Build-a-Reusable-Scroll-List-Component-with-Animated-scrollTo-in-React

Reactコンポーネントを外から操作したい - MOL private updateUserName(e: CustomEvent) { e.preventDefault(); console.log(e.detail.value);

TypeScript and React: Events

https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro?rq=1 A component is changing an uncontrolled input of type text to be controlled error がうっとおしい。 <input type='text' value={value} onChange={event => onChange…

: Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. な警…

https://stackoverflow.com/questions/23665905/two-way-binding-with-checkboxes-always-returns-on valueLink.requestChange(e.target.checked); checkedだった

https://stackoverflow.com/questions/37273876/reactjs-this-refs-vs-document-getelementbyid Netflixはuse no refs, ever, 9:58m https://www.youtube.com/watch?v=kDARP5QZ6nU&list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY&index=28

/src/App.tsx このRequiresTutorialRouteで細工してある const App = () => ( <Provider store={store}> <Router> <div id="app"> <IonApp> <IonSplitPane contentId="main"> <Menu /> <IonPage id="main"> <Switch> <PrivateRoute path="/account" component={Account} /> <Route path="/tutorial" component={Tutorial} /> </route></privateroute></switch></ionpage></menu></ionsplitpane></ionapp></div></router></provider>

始め方 ionic start myApp --type=react 最新版じゃないと「--type=react」オプションはない。 この時「キッチンシンク(kitchen‐sink)」を使う 《主に米国で用いられる》 あらゆるものを投入する[素材にする]. tsのコードになっている。 Reduxになってる。 s…

scotch.io

・参考サイト ReactとIonicでアプリ開発ができる@ionic&#47reactを触ってみた - mottox2 blog これ参考にした。 npm installをしておかないといけない src/index.tsxをいじらしいが、参考サイトではJSとあるがTSX形式。 「src/index.jsにregisterIonicの記述…

https://daveceddia.com/useeffect-hook-examples/ SFC古い？ componentDidMount などのライフサイクルメソッドを利用できないという欠点がある。 Higher-Order Components(HOC)必須 Higher-Order Components と Recompose の初歩 - 30歳からのプログラミン…

https://qiita.com/shohei909/items/eb28dc663a56b17f05cf https://github.com/massiveinteractive/haxe-react

https://github.com/LancersDevTeam/react-payjp-checkout https://tackeyy.com/blog/posts/implement-payjp-checkout-with-vue-spa

この本 React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)作者: 穴井宏幸,石井直矢,柴田和祈,三宮肇出版社/メーカー: 翔泳社発売日: 2018/02/19メディア: 単行本（ソフトカバー）この商品を含むブログを見る この人の…

https://github.com/mui-org/material-ui/issues/2475 <TextField hintText="Hint Text" underlineStyle={{display: 'none'}} /></textfield>

https://github.com/JedWatson/react-select/issues/2131 updateUnregisteredFields : boolean [optional] Used in combination with keepDirtyOnReinitialize. Will update every initialValue which is still pristine. Normally only registered Fields w…

この記事がいい React + Redux - User Registration and Login Tutorial & Example | Jason Watmore's Blog

https://stackoverflow.com/questions/37949981/call-child-method-from-parent ref使って、 <Child ref={this.child} /> current.メソッド名()で呼べる。 this.child.current.getAlert(); そのままだとundefinedになる？？ コンストラクタでReact.createRef();が必須かも constructor(</child>…

すぐ忘れるので・・。 jsfiddle.net const tableStyle = { width: 100, height: 100, border: '1px solid green', }; const borderStyles = [ { border: '30px solid green', borderRightColor: 'red', }, { border: '30px solid blue', }, ]; class Hello e…

<td colspan="9"> これを <td colSpan={9}> にしたい。 置換元 colspan="([0-9])*"> 置換後 colSpan={$1}> これは使い物にならない・・・ HTML to JSX VSCodeならこれいいかも？ https://marketplace.visualstudio.com/items?itemName=riazxrazor.html-to-jsx https://marketplace.visualstud</td></td>…

Reactで印刷専用CSSのインポートするときに、 print.cssに印刷専用コードを書き、 @import "print.css" print; と記載したインポート専用print-import.cssを作ってそれをTypScriptのコード上で、 `import 'print-import.css';やると行けるが・・・ ※私はcrea…

@page{ /* 縦印刷 */ size: portrait; padding-top: 15mm; } これ medium.com これでcssをReactで使える。