イベントに監視を渡すとき 式展開で渡すと.setStateするときに、thisがundefinedになりエラーになる handleLogin() { this.setState({loggedIn: !this.state.loggedIn}) } <Botton onClick={this.handleLogin}}>ログイン</Botton> 対処方法 対処方1 thisをbindする <Botton onClick={this.handleLogin.bind(this)}>ログイン</Botton> 対処方法2 即時関数で実行する <Botton onClick={() =></botton>…

基本 private name: string;は this.nameの型 name: stringは初期化時の引数の型 class Greeter { // プロパティの定義（デフォルトで public） private name: string; // ここで肩を定義 // コンストラクタの定義 constructor(name: string) { this.name = …

React 環境変数で環境を識別する process.env.NODE_ENV => developmen

方法 stateのbooleanを更新したら、styled-componentで動的に変更する キャプチャー こんな感じのボタンを作成 クリックしたら文字色が赤になる様にします ボタンをクリックしたら文字が赤くなる ソース アプリケーション側 import RoundButton from './comp…

手順 gitignoreに.envに入れる gitignore .env .envに環境変数を設定する REACT_APP_FIREBASE_KEY="your_key" REACT_APP_FIREBASE_DOMAIN="your_app_id.firebaseapp.com" REACT_APP_FIREBASE_DATABASE="https://your_app_id.firebaseio.com" REACT_APP_FIREB…

コンポーネントに下記のメソッドをつける onClick={(e) => e.stopPropagation()

インストール npm install --save styled-components 基本的な書き方 import styled from 'styled-components' const 変数名 = styled.タグ名` cssを書く ` ## サンプル const Button = styled.button` width: 300px; height: 100px; border-radius: 10px; `…

React ライフサイクメソッドについて Reactで、元データは、propsであったり、APIで取得してきて、setStateをするケースが多多あると思います。 初期データは、ライフサイクルメソッドで設定する場合が多いと思います。 呼び出すタイミングによっては、デー…

Docker + Rails + React + Postgresの環境構築 今回はこちらの組み合わせでやりたいので、テンプレートを作成しました。 初心者向けです。 環境構築で時間をかけずに、アプリ開発に時間をかけたい人向け ちょっとmysqlあたりで余計なモノが入っているかもだ…

アロー関数の書き方 Reactの本だったら動画を見る時に、アロー関数で、ソースを読み進める事が苦労したので、まとめ。 アロー関数は、実はReactは関係なくJavascriptの記法らしいです。 ただ、Reactでやたら出てくるので、覚えて置くと便利 通常の書き方と、…

結論 コンポーネント内に入れてしまうでいいかなと思いました components tweets tweets.js tweets.scss cssファイルの呼び方 import 'パス' こんな書き方もある const styles = { red: {color: 'red'} } <h1 style={styles.red}>hello</h1> => helloが赤色になる 参考にした記事 jsで管…

ファイルのインポートエクスポート Reactと書いてありますが、これはjavscriptの記法だった気がします インポート インポートする時にエクスポートの方法によって、異なるので注意が必要です。 exportはデフォルトをつける場合とつけない場合があります。 デ…

React 関数を子コンポーネントに渡す 地味にここつまりました この入力フィールドに入れた値を更新している import React from 'react'; import logo from './logo.svg'; import './App.css'; class App extends React.Component { constructor(props) { sup…

関数コンポーネントの書き方 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } ## これ同じ const Welcome = () => ( <h1>Hello, {props.name}</h1>; ) 注意点 ()でかくと、デフォルトでreturnをしてくれる。 {} で書くとエラーになる const Welcome = () =>…

大枠 stateで現在のタブを管理する（currentTab） stageで選択したタブを管理して、setStateで更新する 内容の部分に関しては、stateの内容に応じて出し分ける まずは、選択する部分を作ってみる これは現時点のTwitterのカテゴリーを参考にしています cssを…

絞り込み検索 Reactで絞り検索を実装する 挙動動画 gyazo.com ポイント ポイントは、2つ。 1つめは、filterメソッドを利用する。 配列の中身を検索するメソッド。 検索ワードを、onChangeイベントで取得して、 filterメソッドで条件にヒットしたモノだけを配…