いやいやいやいや!高くない高くない、全く高くない!
簡単!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(セルフ出版)で本出してます。ご興味ある方はぜひ。
振り返りを兼ねて個人開発系アドカレに参加しました。