更新日: 2021年09月16日

【JavaScript】 React tutorial〜環境構築をしよう！

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

Reactチュートリアル1
リンクをコピーしました

この章では、Facebook社が出しているReact Tutorialについて解説します。

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を勉強できます。

<!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>

    
      
      
    
  