読者です 読者をやめる 読者になる 読者になる

DRYな備忘録

Don't Repeat Yourself.

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…