フック 関数コンポーネントに機能を追加するための仕組み 副作用フック コンポーネントを描画、破棄するタイミングで何らかの処理を実行させる フックは必ず関数コンポーネントのトップレベルで呼び出すこと。 ループ、条件分岐、入れ子関数では機能しません…

ルーティング URLに応じて処理を渡す先を変える SPAではページ遷移もアプリが担う インストール npm install react-router-dom 基本 SwitchからRouteになりました。Routeを入れ子にして階層構造を作る。 子ルートは親ルートのパスに連結して定義される。 親…

フォーム 制御コンポーネント Controlled Component useStateを使い、stateで値を保持する name属性とstateプロパティの名前を一致させる 値はvalueに設定する。 const [form, setForm] = useState({email："xx@xx"}) <input name="email" value={form.email} /> 算出プロパティ名。変数を[]で囲うとプ…

state 基本 Props:コンポーネントに値を渡すためのもの。読み取り専用で変更不可 State:状態管理のためのもの。変更可能。フォームの入力など。 使い方 関数コンポーネントではthisではなくuseStateを使う。 useStateを使い、変数、更新関数、初期値を設定す…

分岐条件と繰り返し 繰り返し Array#mapを使ってコンポーネントを返す {articles.map((article) => return <MyArticle {...article} key={article.url}/> )} key リストなどはタグにkeyをつけることで更新、追加の判別が可能となり、無駄な処理がなくなる。 keyはユニークであれば何でも良い。 分岐 ?: 3</myarticle>…

コンポーネント 関数コンポーネントとクラスコンポーネントがある hooksができたので関数コンポーネントがおすすめ 関数コンポーネント returnでReact要素を返す propsを引数で受け取る クラスコンポーネント Componentクラスを継承 renderでReact要素を返す…

環境構築 雛形を作る（webpackも入る） npx create-react-app xxx npm start npm run build 本番環境用にコンパイルしbuildに出力 npm run eject webpack/babelの設定情報をconfigに出力 React.StrictMode 非推奨の警告を出してくれる機能 JSX: タグをjavasc…

関数コンポーネント Reactではclass based componentが使われなくなってきて、functional componentを推しているようです。functional componentではhooksを使っていろいろ実装する必要があります。 useEffect functional componentではcomponentDidMountやc…

状態管理のやり方 React Context ライブラリ不要。 const AppContext = React.createContext(null); // Consumer配下のcontextでアクセス function LoginScreen() { return ( <AppContext.Consumer> {(context) => ( <Text>LoginScreen</Text> <Button title="login" onPress={() => context.setLogin(true)}></Button> </View> )}

.envを使う .envファイルからfirebaseのapikeyを取り出したい。 yarn add react-native-dotenv GitHub - zetachang/react-native-dotenv: A Babel preset let you import application configs from .env file (zero runtime dependency) // babel.config.js …

インストール npx create-react-app sampleapp npm install redux react-redux Quick Start · React Redux react-reduxの目的 Reduxのstate, dispatch関数をReactのpropsで操作できるようにする でAppを囲む mapStateToPropsとmapDispatchToPropsを用意し、c…

はじめに Redux Devtoolsはchrome extensionを追加しただけでは使えません。 アプリ側のコードに下記を仕込んでおくする必要があります。 extensionはchromeウェブストアにあります。 GitHub - zalmoxisus/redux-devtools-extension: Redux DevTools extensi…

はじめに おそらく読んで理解できることはないので、なんとなく読んでExample: Todo Listで紹介されているようなサンプルアプリを作ることをおすすめします。 またReactで具体的に使う方法は後述のreact-reduxのガイドを読むことをおすすめします。 Basics h…

概要 あるコンポーネントから、子、孫のコンポーネントに値を渡すのに 通常だとpropsを使って順番に橋渡ししていくので手間ですが、 Contextを使うことでそんな面倒はなしにグローバルに値にアクセスできます。 アプリ全体で使う設定をもたせるのに便利だと…