C++ ときどき ごはん、わりとてぃーぶれいく☆

USAGI.NETWORKのなかのひとのブログ。主にC++。

react

React で TypeScript な Component 内の一部のメソッドから他の定義済みのはずのプロパティーや state へのアクセスが undefined になった時に思い出したいメモ

期待動作する例 ↓は button をポチると hidden で置いてあるファイルアップロード用の input の click を発火するコンポーネント的な例です。 import React, { Component } from "react"; interface IProps { } interface IState { } export default class F…

諸事情により React で TypeScript な web アプリの中から window に global な変数を write access する方法のメモ

Window をオレオレ派生した interface をでっちあげてキャストすれば window の任意のプロパティーに write access できる。後は野となれ山となれ。 ↓例、React の state 持ちの Component な App のインスタンスを window.app な global 変数として登録: Ap…

React プロジェクトの src 内のコンポーネントから諸事情によりウェブサイト外部の SCRIPT を読む方法のメモ

諸事情の例 コンポーネントの render 時に CDN やどこかしらから <script src="https://example.com/hogehoge.js" crossorigin></script> とかしたい コンポーネントの render 時に .jsx/.tsx の翻訳時には有効ではない ECMAScript コードをちょろまかしたい 4つの方法 もっとあるというのはさておき。 1. react-script-tag https…

React なプロジェクトを TypeScript に移行したら3つの困りが発生したけど解決できたメモ

こまったこと: 1. カスタムソースディレクトリー ./src.react を tsc が認識できなかった 諸事情により ./src ではなく ./src.react に react 用のソースを配置していたが、 tsconfig.json の include では "." 文字の入ったディレクトリーは認識しない仕様…

Web 向けの3D の GPU 描画コンテキストお取り扱いライブラリーの2020-07時点のメモ: ES 系, Unity, Unreal Engine, Rust 系

note: 2D 系(eg. phaser, ggez, etc. )は今回のメモでは含めていません。 Lang Library License WebGPU WebGL native ES & wasm ES babylon.js Apache-2.0 Ready 2 %a n/a pure ES ES three.js (+A-Frame) MIT(+MIT) (unknown†1) 1 + (2) n/a pure ES ES pla…

CRA=create-react-app が WSL で start できない理由と回避方法のメモ

問題 WSLでCRAしてyarn startするとcmd.exeを実行できずにウェブブラウザーの起動どころかサーバーも起動せず死んでしまいます。 再現方法: WSLで npx create-react-app hoge して cd hoge; yarn start します Starting the development server... events.js…

RustのcdylibをバックエンドにElectronをフロントエンドにするcargo-generateプロジェクトテンプレートを公開したメモ

「RustのcdylibをバックエンドにElectronをフロントエンドにする」プロジェクトを3秒くらいでお手軽作れるcargo-generateできるプロジェクトテンプレートを公開しました。 template-rust-backend-with-electron-frontend https://github.com/usagi/template-…

react-electron-ffi-(native dll/so/dylib) プロジェクトを作るメモ (2020-03-19版)

(1/2) react-electron ここは今回のメモの本編ではないものの、"やり方"がころころ変わるようなので一応現時点での方法をついで程度に整理します。 (1) プロジェクトのディレクトリー(=リポジトリー)を create-react-app で生成: npx create-react-app myapp…