Skip to main content

6 posts tagged with "React"

View All Tags

アプリを作成する

djangoのstartappの代わりに、create-react-appでアプリを作成します。 nodeをインストール後、npm install -g create-react-appを実行することで使用できます。

  • django-admin startproject my-project
  • cd my-project
  • create-react-app my-react-app
  • cd my-react-app

Reactは簡単にいうと、Webなどの処理と開発を最適化するための新しいエコシステムといえます。 また、hookは関数ベースのみでReactを実装する方法なので、型システムと相性がいいです。

前半では、DOMを直接触らない大体のjsコードをhookで使用する方法をまとめました。 後半では、前半で使ったhookを使って、独自のhookを新たに作る方法をまとめました。

useStateのような状態を扱う自作hookを作る際、引数に関数を使うことがあります。 Reactのpropsなど、引数代入することで型を特定できたり、コードが縮小できて便利です。 たとえば、useStateでは初期値の計算が重かったり前の値を扱痛い場合、引数に関数を指定させます。 const [rows, setRows] = useState(() => createRows(props.count));

このuseStateのソースコードをみると、引数の型は(()=>S)|Sとして、初めに引数自体に関数の結果を代入していました。

THREE.jsはWebGLを用いて3D表現ができるライブラリで、 GLSLファイルもビルドしてくれるのでとてもわくわくできます。 (トップページにglslを利用してます。) 従来のjsだと大規模なアプリになると予期しないことが多く起こるので、 viewに特化したReactのライフサイクル上で安全に構築します。(特にhookだと関数型プログラミングできる。)

css in jsではメディアクエリ(@media)でのスタイルの場合分けができないので、 styledRadiumというライブラリを使ってましたが、 typescriptやReactの新しいバージョンへの対応が遅かったり変なエラーが多かったり不便なので、 代わりとして、自作hookのライブラリを公開しました。 use-mediaというリポジトリを参考にしています。