【JavaScript】React tutorial解説 ① (環境構築をしよう)

JavaScript

Reactチュートリアル1

Reactを勉強したいけど何から勉強して良いか分からない。。 そんな方のための解説です。

ReactをTutorialで勉強していきましょう!

ReactのTutorialはFacebook社が出しているものなので、やっておいて間違いないです。
Reactを勉強したいけど何から勉強して良いか分からない。。
と誰かに言ったときに、ReactのTutorialは勉強した?と言われるほど、まず初めの勉強はTutorialというのがエンジニア界隈で常識としてあります。

Reactを実際に業務で使っていないエンジニアも、Reactって一体どういうものなんだろう?ということで、触ってみる人が多いです。

逆にReactのTutorialを勉強したといえば、Tutorialくらいの知識はあるんだ!と、自分のレベルを示唆する意味でも使えます。

なのでまずはReactのTutorialから勉強し始めましょう。

Tutorialで何を作るの?

Tutorialでは皆さん、小さい頃に砂場の上でしたかもしれませんが、◯✕ゲームを作ります。下記で実際にマルバツゲームが下記から出来ます。
下記のサイトはcodepenといってこのエディター上でもreactは動くので、ここでやってもらっても構いません。
筆者も初めにreactを触ったときはこのcodepen上から触りました。

◯☓ゲーム
それかcodepenは見にくい、自分の慣れているテキストエディターで使いたいという方は下記のコードをすべてコピーしてください。
htmlファイルだけでreactを学習できます。

自分のパソコンでreactを学習するとなると、ライブラリをパソコンにダウンロードする必要があるのですが、下記の方法だとwebのライブラリを読み込んでるだけなので、お手軽にreactを勉強できます。

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React Sample</title>
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    )
  </script>
</body>
</html>
まとめ

これで実際にどのようなアプリをTutorialを通じて作れるか知れてreactが動く環境を作成できました。次の章から実際にTutorialの解説をしていきます。