Reactの現在の潮流

以前はclassでstate機能を使い変更を検知し描画するのがReactの基本でした。
ですが、あれ?ほとんどの案件は高機能なclassじゃなくてfunctionで充分じゃね?
という考えになってきました。
でもfunstionだとstateが使えないし、やっぱりclassを使うしかないよなー
という考えになってしまいます。
それならfunctionでもstate機能を使えるようにしてしまえばいいじゃない。
ということでReact Hooksが新規追加されました。
たいていの案件はfunctionとReact Hooksさえあればclassを使うまでもなく十分使えるしコーディングがシンプルになる!
これはいいぞ!というのが現在のReactの潮流です。
もちろんfunctionとReact Hocksで実現できないことはclassを使う必要が出てきます。
もし入門編の参考情報がclassを使っていたり、React Hooksを使っていなかったら古い情報の可能性があるので注意してください。

基礎

波括弧、中括弧、{}、{}の書き方

コードではなく文字として波括弧を扱いたいときがあります。
JSXは波括弧が来たらコードとして認識し処理をします。
そのため文字列として扱いたい場合は{'{'}や{'}'}と記述します。
{うんたらかんたら}とかいたら内部では「うんたらかんたら」はコード扱い。
{'{'}うんたらかんたら{'}'}とかいたら内部では{うんたらかんたら}という文字列扱い。
const myDiv1 = <div>trueは表示されない{true}</div>;
const myDiv2 = <div>{'{'}うんたらかんたら{'}'}</div>;

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
MUI v5 API
エラー対処
HTMl select
戻る

全体目次