30
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-11-30

いやいやいやいや!高くない高くない、全く高くない!
簡単!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(セルフ出版)で本出してます。ご興味ある方はぜひ。

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

30
14
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?