いやいやいやいや！高くない高くない、全く高くない！
簡単！React なんてホント簡単だから！！超簡単だよ？
ほら、これみて！
<div id="first">Hello world</div>
これ React で表示するなら、
ReactDOM.render(
<div id="first">Hello world</div>,
document.getElementById("root")
);
ってするだけだからね？
ReactDOM.render([描画したい要素], [描画する位置]) って書いてるだけだからね？
Q.「コンポーネントって難しいんでしょ？」A.「
いやいやいやいや！難しくない難しくない、全く難しくないって！
簡単！コンポーネントなんてホント簡単だから！超簡単だよ？
ほら、これみて！
const App = () => {
return <div id="first">Hello world</div>;
}
これ App って名前付けたコンポーネントね。
コンポーネントなんて単に関数みたいなの書くだけだからね？
コンポーネント名の 1 文字目を大文字にして、描画したい要素を return するだけだからね？
え、App コンポーネントを描画したい？それなら、
ReactDOM.render(
<App/>,
document.getElementById("root")
);
ってするだけだからね？ほら、簡単でしょ？
Q.「Props っていう新しい考え方を覚えないといけないんでしょ？」A.「
いやいやいやいや！新しくない新しくない、全く新しくないって！
データデータ！Props なんて単なる受け渡し用のデータだから！
ほら、これみて！
ReactDOM.render(
<App/>,
document.getElementById("root")
);
これ、さっきの App コンポーネントね。これに title っていう名前で PROPS って値を渡したいときは、
ReactDOM.render(
<App title="PROPS"/>,
document.getElementById("root")
);
って書くわけ。この追記した部分 title='PROPS' を Props って読んでるだけだからね？
ちなみに受け取りは、App コンポーネントで
const App = (props) => {
return <div id="first">Hello {props.title}</div>; // 'Hello PROPS'
}
ってするだけだからね？ほら、簡単でしょ？
Q.「State っていうのも聞いたことがあるんだけど？」A.「
そうそうそうそう！State 、State ！なんで State 知ってるの？神なの？
State はデータ！State は内部管理用のデータだから！
ほら、これみて！
const [count, setCount] = useState(0);
これ count っていう名前の State と、State を更新する setCount って関数を記述してるだけだからね？
useState(0) って単に count の初期値を 0 ってしてるだけだからね？
え、つまり State はどう使うのって？
例えば、
const {useState} = React; // state 使う時はこれ書いてね。
const App = () => {
const [count, setCount] = useState(0);
return (
<div onClick={() => setCount(count + 1)}>Click me</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById("root")
);
みたいにすれば、クリックすると 1 増える div 要素が作れるわけ。ほら、簡単でしょ？
Q.「・・・・・」A.「
あ、そういえば、いままで言ったことって 1 つの HTML ファイルで書く想定だったから、書く時は次の script タグ加えてね。（重要）
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
あと 自分で書くソース部分は <script type="text/babel"> ... </script> って書いてね。（重要）
あとがき
こんな感じで、全力＆前のめりに React の学習は簡単だよって言ってくれる人がいたら良かったのに、と思ったので書きました。
JSX とかクラスコンポーネントとか環境構築の話とかはあえて触れずに書いてます。新しいこと学ぶときってどうしても心理的ハードルが生まれると思うので、覚えることは最小限にして伝えたくて。
この記事が誰かの React 学習のとっかかりになれると嬉しいです。
読んでいただき、ありがとうございました。
みんな React やろうぜ :)
Kindle（セルフ出版）で本出してます。ご興味ある方はぜひ。
振り返りを兼ねて個人開発系アドカレに参加しました。