用途
新着
履歴
言語

React.js JSXを変換する

React.js JSXを変換する
React.js JSXを変換する

フェイスブック製のJSライブラリReact.jsに触れてみました。

まずはこの本家のページをよく読みます。

ページは更新されて適宜ユーザ思いのチュートリアルが更新されています。

 --その中で以下のようなソースが出てきます。
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

これはJSXシンタックスという記述でJS内でタグのように記述できるもののようです。

次にこのスクリプトの部分を

src/helloworld.js

として別ファイルに記述します。

src/helloworld.jsをビルドするツールをインストールします。

Macの場合はターミナルを立ち上げて以下のコマンドを流します。

npm install -g react-tools

npmのコマンドを使う場合は、npm (node.js package manager) が必要になります。

npmのreact-toolsのページはこちら

npm install -g react-toolsを実行時に私の場合エラーが出ました。

エラー内容が「権限がなくていろいろできない」的なものでしたので、以下のような権限変更で対応しました。

sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules
sudo chown -R $USER /usr/local

そして、先ほど作成したディレクトリに移動して以下のコマンドを実行。

jsx --harmony src/ build/

すると src/helloworld.js が  build/helloworld.js に変換されます。

build/helloworld.jsの内容は以下です。

ReactDOM.render(
  React.createElement("h1", null, "Hello, world!"),
  document.getElementById('root')
);

このようにプレーンな記述で生成されます。

近々次のステップのチュートリアルもトライしましたら、また体験談を書かせていただきます。

公開 : 2019-07-31 22:40:30
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top