React始めました

React

突然ですがReact始めました。

今回はReactを書いて動かせるまでの手順です。
鉄板のチュートリアルを見てやったのですが、 僕の理解力が低すぎて行間が読めないところがあったので、 サクッとReactを書けるところまでを備忘録として残しておきます。

環境

  • 実行環境: OSX 10.11.6
  • Reactバージョン: v15

大まかな手順

  1. index.htmlの編集
  2. serverの起動
  3. ゴリゴリ書いていく

1. index.htmlの編集

ここからzipをダウンロードします。

でその中のpublic/index.htmlを開いて次のように変更します。

変更内容

    <script type="text/babel" src="scripts/example.js"></script> 
    <script type="text/babel">
      // To get started with this tutorial running your own code, simply remove
      // the script tag loading scripts/example.js and start writing code here.
    </script>

↓↓↓↓↓

    <script type="text/babel" src="scripts/tutorial.js"></script>

変更後のindex.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://unpkg.com/react@15.3.0/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="scripts/tutorial.js"></script> 
  </body>
</html>

2. serverの起動

1.でダウンロードしてきたzipには簡単なWebサーバが含まれているので ターミナルからzipを展開したディレクトリに行って

ruby ./server.rb

で起動する。

3. ゴリゴリ書いていく

あとはpublic/scripts/tutorail.jsを作り、ここにゴリゴリ書いて

http://localhost:3000にアクセスすればOK！