React 入門

今流行りの（?） React を触ってみた話。公式ドキュメントで勉強しながら四苦八苦して Web アプリを作ってみたので、個人的に参考になったページなどを紹介しながら書いていきたい。

React 初心者なので話半分に。また、流行り廃りの早い世界なので頭の片隅にいれるくらいにするのがいいと思う。

React とは

React の特徴は、上記公式サイトにも書いてある通り

の 3 つ。

おそらく Javascript が動的とか手続き型と呼ばれてるので、対比の意味も込めて宣言的といっていると感じた。

Javascript で書いていても Props という簡易的な型を導入できたり、本格的に方が導入された Typescript で書いたりできる。

プログラムをコンポーネント（部品）の組み合わせで表現しようとする考え方。コレ自体は他の言語でも使われていたりするので画期的でもないが、フロントエンド界隈（？）では画期的なのかもしれない。

よく調べてみると、プログラミングをする上でのテクニック的な意味ではなく、 React がサポートしている仮想 DOM という仕組みが画期的らしい。

ココらへんの話は結構長くなるので、参考にしたサイトを載せておく。（2014 年の記事だが、とても丁寧でわかりやすいのでおすすめ）

これは実感できなかったが、

React can also render on the server using Node and power mobile apps using React Native.

らへんから、クロスプラットフォーム的な意味で応用がきくと言いたいのではないかと思う。

React の開発元である Facebook 製の入門ツール Create React App を使うのがおすすめ。

npx create-react-app my-app
cd my-app
npm start

をするとブラウザで http://localhost:3000/ が開かれる。

Edit src/App.js and save to reload.

とあるように、編集して保存するだけで変更が反映されたページが自動的に表示される。

折角なので Declarative な React を。

先程のコマンドだと Javascript でテンプレートが作られてしまうので、一旦フォルダを削除し、以下のコマンドを実行。

npx create-react-app my-app --typescript

すると Typescript 版のテンプレートが作られる。

このままだと簡単なアプリ開発くらいしかできないので、フォルダ構成や Lint もいじっていきたい。

ここからは個人的な好みもあると思うので割愛。参考にできそうなサイトをば。