react(23)

23follower
Tomoumi Nishimura さんのアバター 12views

create-react-native-appを触ってみる

React Nativeのプロジェクトをサクッと作れるcreate-react-native-appを導入する方法です そもそも論 React.jsの雛形を作れるCreate React Appというものがありますが、これに着想を得てR... 2017年3月21日
nissy さんのアバター 8views

ReactNative react-loggerを使ってデバッグ

ReactNativeのデバッグは公式にもある通り、Webブラウザ上でブレークポイントを打ちながら可能ということで、かなり良心的な設計になっているのですが、さらにReduxフレームワーク開発を効率良くすすめるデバッカーモジュール「react... 2017年3月17日
ysugiyama12 さんのアバター 11views

文字が入力されている時だけ色が変わって押すことができるボタンの作成

割と使う機会が多いはずだが、綺麗にまとまっているサイトがなかったのでまとめておく。 class Hoge extends Component { constructor() { super(); this.state ... 2017年3月16日
@iwasaki さんのアバター 15views

Redux FormのWizard FormでSubmit Validationを使う方法

今回はRedux FormのWizard FormでSubmit Validationを使う方法です。Material UIも使っていますが、今回はあまり話の本筋ではありません。 現時点においてReduxでFormを扱うにはRedux F... 2017年3月16日
@iwasaki さんのアバター 9views

firebaseの設計思想

firebaseの設計思想とはRDSなどの正規化とは大きく異なるため、柔軟な発想が必要になっていきそうです。 基本的には以下のような考え方になりそうです。 insert,put時にがんばる(たくさん登録する) select時には複雑な... 2017年3月15日
@iwasaki さんのアバター 12views

Material UI のCheckBOXをRedux Formで使う

redux-formでMaterial UIを使用する例としては http://redux-form.com/6.5.0/examples/material-ui/ に例が載っています。 ただ、redux-formとMaterial ... 2017年3月15日
@iwasaki さんのアバター 4views

rechartsのラベルをカスタマイズする方法

reactでChartを表示する際にはrechartsを使用するのが王道のようです。(chartjsもありますが、v2.0に対応しているライブラリがまだメジャーになってないなど色々あるようです。) Pieチャートのラベルをカスタマイズして... 2017年3月15日
ysugiyama12 さんのアバター 32views

PropsとStateについて

ここの理解がかなり怪しかったので自分なりにまとめます。 Props コンポーネント利用時に属性として設定できる値で、一度定義したらその値を変更することはできない。 例えば <MyComponent PropsName = "... 2017年3月10日
@iwasaki さんのアバター 6views

react15の環境にrechartsをインストールする方法

npm install -g recharts してみたら npm WARN recharts@0.21.2 requires a peer of react@^0.14.0 || ^15.0.0 but none was insta... 2017年3月10日
@iwasaki さんのアバター 15views

Material UIのcolorsの使い方

http://www.material-ui.com/#/customization/colors の使い方です。 すべてのカラーを取得してcolorsとして使えるようにします。 import * as colors from 'ma... 2017年3月7日
@iwasaki さんのアバター 10views

eslint-config-airbnbを使ってES6の記法を実現する

airbnbのeslintを導入すると強制的にES6の文法で書かざるを得なくなります。これが非常に便利なのですが、その中で新たに知った記法で目立った点を記載しておきます。 Reactのサンプルコードとか実際に書いてみたものの、どうやってE... 2017年3月3日
@iwasaki さんのアバター 10views

prop type XXX is invalid; it must be a function のエラーが出た時

Warning: Failed prop type: MyDialog: prop type `loading` is invalid; it must be a function, usually from React.PropTypes... 2017年3月1日
@iwasaki さんのアバター 14views

React+Reduxでの開発時のおまじないアレコレについて調べてみた

ようやくReacut、Reduxの開発に慣れてきましたが、一部おまじない的に使っているものの、意味を理解してない部分があるので調べてみました。 npm install 大抵のケースはこれ npm install -g eslint ... 2017年2月28日
@iwasaki さんのアバター 28views

reduxで配列に要素を追加・削除する方法

配列への要素の追加、削除は以下のように行うようです。 const initialState = { selectedIds: [], }; function addItem(array, item) { return Array... 2017年2月28日
@iwasaki さんのアバター 10views

Reactでユニークなkey指定の警告が出たときの対処法

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `XXXList`. See h... 2017年2月27日
@iwasaki さんのアバター 5views

Reactの型指定で配列の形式まで指定する方法

例えば const data = [{ id: '001', label: '北海道' }] みたいな形式のデータのみを許可する場合、以下のように型の指定を書きます。 Hoge.propTypes = { data: R... 2017年2月27日
@iwasaki さんのアバター 17views

Reactのコンポーネントの使い方

ベースとなるコンポーネント default と書くことで、他のファイルからも参照できるようになるようです。Javaで言うところのpublicと理解しています。 export default class BaseBox extends C... 2017年2月23日
@iwasaki さんのアバター 10views

ReactのPropTypesで指定できる形式

PropTypesで配列や文字列、数字などを指定することができます。 BaseList.propTypes = { description: PropTypes.string.isRequired, data: PropTypes... 2017年2月23日
@iwasaki さんのアバター 27views

Reactでループをする方法

Reactで以下のようなfor文を使おうとすると「Using ‘ForInStatement’ is not allowed. (no-restricted-syntax)」と怒られます。 const list =... 2017年2月23日
you12724 さんのアバター 37views

reactのpropsにDOM構造を渡す

フロントエンドを最近勉強中でまだまだ未熟なのですが、reactでComponentを作っている時に、似たような配置だが、表示する部分の構造が微妙に違う・・・ などでいくつも無駄なComponentを作っていた時にDOMを渡せれば解決するんじ... 2016年9月5日