Node.jsを使わずにReact環境を構築する方法

React単独で動く環境を構築したい場合、以下の手順で構築することができます。
(本番運用するときはパフォーマンス面からNode.jsを使うのが通常です。)

ディレクトリ構成

ファイル

index.html

app.js

この状態でindex.htmlを開いてもHello Worldが表示されないはずです。
なぜならapp.jsにJSXの記述があるためです。

babel-standaloneを追加

ブラウザはJSXを理解できないのでブラウザが理解できるように変換してあげる必要があります。
変換には以下のとおり、babel-standaloneを使用します。

index.html

これで正常に表示されるようになったはずです。

参考

公式ドキュメント
https://ja.reactjs.org/docs/add-react-to-a-website.html
GitHub
https://github.com/sign0324/react-no-nodejs

2 COMMENTS

アバター cresent moon Cafe

Hello There. I found your blog using msn. This is a very well written article.

I’ll make sure to bookmark it and return to read more of your useful
info. Thanks for the post. I will certainly return.

アバター nakamu

Thank you for your comment.
I’m glad to help you.

If you give me a comment again, I will be encouraged.

コメントを残す

メールアドレスが公開されることはありません。