React.js 開発環境構築（Sublime Text3設定編）

React.js 開発環境構築（Sublime Text3設定編）です。

package追加随時更新します。

見出し

1 Sublime Text3 の React.js 開発用 packageインストール
- 1.1 Sublime Text3 の ReactJS Syntax 設定方法
2 React.js サンプル HelloWorld
- 2.1 index.html
- 2.2 react_test.js

Sublime Text3 の React.js 開発用 packageインストール

以下のpackageをインストールしておく

Babel
ReactJS

⇒Sublime Text3のpackageのインストール方法リンク

Sublime Text3 の ReactJS Syntax 設定方法

前提：上記packageがインストールされている事

view->Syntax->Babel->JavaScript(Babel)を選択

以下のreact_test.jsを開いて色がつけばOK

snippetsの確認（ショートコマンドで定型分に展開される）

「rcc」とうってtabを押して展開されればOK

全コマンドはpackage公式参照

https://github.com/facebookarchive/sublime-react

React.js サンプル HelloWorld

index.html

<!DOCTYPE html>
  <html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/jsx" src="react_test.js"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

react_test.js

class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        HelloWorld {this.props.name}
      </div>
    );
  }
}
var m = React.render(<HelloWorld name="john" />, document.getElementById('app'));

class HelloWorld extends React.Component {

render() {

return (

<div>

HelloWorld {this.props.name}

</div>

);

}

var m = React.render(<HelloWorld name="john" />, document.getElementById('app'));