gl-reactを使ってGLSLでお絵描きをしてみます。
以下と同じようなGLSLの練習メモです。
カテゴリー: React
React Nativeの複数スタイル指定
状態に合わせてスタイルの上書き（オーバーライド）をしたいことはよくある。
|
1 2 3 4 5 6 7 8 9 |
const views = arr.map((v, i) => { const _style = StyleSheet.flatten([ styles.A, i % 2 == 0 && styles.B ]); return ( <View style={_style}>{v.name}</View> ); }); |
スタイル自体はStyleSheet.createで定義してると思ってください。
通常[]（配列）を使えばいいのですがちょっとハマったことがあったので、３つの方法と注意する点を書いておきます。
React.FCでもforceUpdateしたい
React管理下にない値の変更時に描画を更新したい。
あまり使いたいものでもないですが、React.Componentでは適切なタイミングでthis.forceUpdate()を使うことになります。
今回は関数コンポーネントで作成中にforceUpdateに当たる処理が必要になったのでどうにかしようという内容です。
Next.js with Material-UIでスタイルが崩れる
Next.jsとMaterial-UIの組み合わせでビルドすると予期せぬ表示ずれがあった。
現象としてはnext.jsのPHASE_PRODUCTION_BUILDでgetInitialProps()のあるページで初回読み込みをするとmakeStylesによるスタイルが崩れる。
ErrorやWarningはないし上記以外のアクセスではスタイル崩れもない。
結構複雑な問題だったので要点をまとめながら解決を図ります。
環境：next: 9.1.7material-ui: 4.8.3react: 16.12.0カスタムサーバー express: ^4.17.1
Next.jsプロジェクトの公開手順
Next.jsで作ったアプリを公開、SSL対応、永続化するためのメモ。
nowじゃなくて普通に自前のLinuxサーバーに載せることを考えます。
気持ち的にはNext.jsプロジェクトの初期設定の続きです。
Next.jsプロジェクトの初期設定
next.jsはnowと合わせると秒単位でWEBアプリを公開できるような超速フレームワークですが、それなりの規模のものを作ろうと思うと色々設定が必要です。
大分慣れてきたので振り返りもかねてプロジェクト初期設定の備忘録。
プロジェクト作成からGit設定、各種コンフィグ類の設定、必須ライブラリの導入とカスタムページの用意まで。
Next.jsで外部ライブラリのスタイルシート適応
ReactでUIコンポーネントを使う時にMaterial-UIは一番有力な選択肢だと思います。
Next.jsでも同じように使いたいところですが、サーバーサイドレンダリング(SSR)時にcss modulesによるクラス名付与が合わなくなる問題が起きました。
index.js:1 Warning: Prop className did not match. Server: “MuiBox-root…これによって一部スタイルが崩れてしまう。
devでの再コンパイルや内部遷移によって直ることもあるがproductionでも問題が起きるので使い物にならない状態なので対策します。
Next.jsのポート番号設定
【React】constructor内でContext APIを使用する
Next.jsを使っていてgetInitialProps()内でContext APIを使いたかったけど、Reactライフサイクル内にないため使えなかった。
じゃあpropsを経由してconstructor()内でコンテクストに入れようとしたら中身にアクセスできなかった。
componentDidMount()でも悪くはないけどrender()前に処理したいので、ドキュメントにない方法で使ってみます。
Next.jsのライフサイクルと外部APIのタイミング
簡単にReactを使ったSSRができるNext.jsを使っていて外部APIをfetchするときに色々戸惑ったので覚書き。
公式ドキュメントが結構偏っているのと日本語情報も少ないのでわりと手探りでどうすればいいか考えていきます。
next 9.1.7 react 16.12.0