DRYな備忘録

Don't Repeat Yourself.

reactjs

Twitter API v1.1を利用する箇所が失敗しているので調査・対応ログ

背景 もうかれこれ10年*1開発が続いているChrome拡張*2があり、このCI/CDの結果報告にTwitterのAPIを用いている。また、ユーザにとっても、Chrome拡張上でTwitter認証を行い画像付きツイートを行える機能を提供している。 今回、この機能が以下のエラーを吐…

GitHub Actions からの deno deploy が失敗する: Error: The deployment failed: Relative import path "$fresh/server.ts" not prefixed with / or ./ or ../

問題 以下のようにデプロイのGitHub Actionsを設定したが、掲題のエラーを得る。 steps: - name: Clone repository uses: actions/checkout@v2 - name: Upload to Deno Deploy uses: denoland/deployctl@v1 with: project: "fresh-youtube" entrypoint: "./m…

TypeScriptとExpoで始めるReactNativeアプリ開発

背景 Expo SDK v31 から、標準でTypeScriptをサポートしているらしく、ホンマかいな、というエントリです。 ゴール Mac上のシミュレータで、アプリが動く ソースコードがTypeScriptで書かれている うるせえ動くもん見せろ はい github.com 以下、ログなので…

【React】画像がNotFoundのときimgタグごと表示せず存在を消す

目的 画像がサーバ上に無いとき、こうなる。 画像がサーバ上に無いときは「見つからないよ!」という画像を出すのもかっこ悪いので、タグごと存在を消したい。こう。 参考 javascript - How to silently hide "Image not found" icon when src source image …

react-routerでページを共通Layoutに乗せたりログイン画面は乗せなかったりするルーティングの設定

import React from 'react'; import ReactDOM from 'react-dom' import {Router, Routes, browserHistory} from 'react-router'; import {MyFancyLayout} from '../../layouts'; import { LoginPage, // これと HomePage, SettingPage, NotFoundPage, // こ…

Draft.jsを使ってContentEditableなdivに絵文字をレンダリングしつつ編集可能にする

ぜったいなんかやり方あるだろと思いつつなかなか見つからなくてググり続けたりして6時間ぐらいハマったのでメモ。 import React from 'react'; import {Editor, EditorState, CompositeDecorator} from 'draft-js'; const getEmojiURL = (key) => { // TODO…

webpackでModule not found: Error: Cannot resolve module 'react'と叱られる問題

問題 % npm run build > component-example@0.0.1 build /Users/otiai10/proj/web/react-examples/foo > webpack Hash: f59be0c76d47bf9f7a3e Version: webpack 1.13.0 Time: 496ms Asset Size Chunks Chunk Names ./lib/index.js 3.75 kB 0 [emitted] main …

react-reduxでmapStateToPropsが呼ばれてるのに再度renderされない問題

こういうコード書いて、末端コンポーネントで直接stateの変化をsubscribeしようとした class Logs extends React.Component { render() { return <ul> {this.props.logs.map((log) => { return <li>{JSON.stringify(log)}</li> })} </ul> } } Logs = connect((state) => { retu…

Reduxって一体なんなのかちっとも分からないよ【追記あり】

参考 Read Me | Redux "Redux evolves the ideas of Flux" Flux | Application Architecture for Building User Interfaces Example: Todo List | Redux Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita Redux入門 1日目 Reduxとは(公式ドキ…

webpackでjsx記法(HTMLっぽいの)がsyntax errorになる問題

毎回つまづくのでメモ 問題 % npm run build > myproject@1.0.0 build /Users/otiai10/proj/web/react-examples/myproject > webpack Hash: bbba9acdc8b879c1ad6d Version: webpack 1.13.0 Time: 402ms + 1 hidden modules ERROR in ./src/js/app.jsx Module…

React NativeでHello, World

React Nativeとは facebook.github.io React Native ファーストインプレッション - Qiita “コードは特に別のトランスパイラなどを必要とせず ES6 前提で書くことができる” “JavaScript のコードがコンパイルされてネイティブコードになるわけではなく、内部…

【追記】babelのバージョン揃えるのみなさんどうしてるんですか? Unexpected token

% npm install --save-dev babel babel-core babel-loader こういうの出る % webpack ERROR in ./src/js/app/app.jsx Module parse failed: /app.jsx Line 1: Unexpected token You may need an appropriate loader to handle this file type. | import Reac…

React+Babel+webpackの最小構成つくってだるかったことメモ

サンプルページ 3がつく数字でアホになるやつ tl;dr npm install -gはだるいので、npm scripts経由でwebpack呼ぶのがよさそう webpackが扱うべきファイルによってloaderがひつよう(babel-loaderとか) loaderを書く順番でひっかかって非常にだるかった impo…

React.jsで改行が表示されなくて困ったメモ

問題 textarea -> divの中身にする みたいなありがちなやつで、これが こうなる 改行\nして\nください ってなってる 調査 みんな困ってたっぽい https://groups.google.com/forum/#!topic/reactjs/VUJT314Gm50 (textarea内部のはなしだけど↓) http://niwar…