Help us understand the problem. What is going on with this article?

React 未学習者 Q.「React って学習コスト高いんでしょ?」A.「

いやいやいやいや!高くない高くない、全く高くない!
簡単!React なんてホント簡単だから!!超簡単だよ?
ほら、これみて!

<div id='root'>Hello world</div>

これ React で表示するなら、

ReactDOM.render(
  <div id='root'>Hello world</div>,
  document.getElementById('root')
);

ってするだけだからね?
ReactDOM.render([描画したい要素], [描画する位置]) って書いてるだけだからね?

Q.「コンポーネントって難しいんでしょ?」A.「

いやいやいやいや!難しくない難しくない、全く難しくないって!
簡単!コンポーネントなんてホント簡単だから!超簡単だよ?
ほら、これみて!

const App = () => {
  return <div id='root'>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='root'>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(セルフ出版)で本出してます。ご興味ある方はぜひ。

振り返りを兼ねて個人開発系アドカレに参加しました。

drytt
React Lover
https://drytt.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away