スポンサーリンク

React.jsを触ってみる(1)

JavascriptのViewに関するコンポーネント(?)らしい。
よく分からないが、触ってみる。

(環境)
Windows8.1
React15.3.2
VisualStudioCode
C:\js\react-tutorial\ フォルダに作成

●以下にしたがって、準備

今からはじめるReact.js〜準備〜
react.jsreact.js142
kunikenが2015/10/12に投稿(2015/10/17に編集)
http://qiita.com/kuniken/items/19fccc27b8bfa8068d22

(1)C:\js\react-tutorial\ フォルダを作成

image

(2) https://nodejs.org/en/download/

から、インストーラーをダウンロードしてインストール。(私の環境では既に入っていた。)

image

(3)package.json ファイルの作成

npm init

image

image

npm install react –save

image

image

React15.3.2 らしい。

 

引き続き、http://qiita.com/kuniken/items/963cb977dffd3e662e40  いしたがってやっていく。

(4)index.html の作成

react-tutorial/client/index.html を作成

image

react-tutorial/client/scripts/index.js を作成

image

(5)jsxのコンパイル

npm install gulp browserify reactify vinyl-source-stream –save
npm install gulp -g

image

image

image

image

(6)react-tutorial/gulpfile.js  を作成

image

gulp browserify

→エラーが出てしまった、、、

image

(参考)今からはじめるReact.js〜React ver0.14〜
react.jsreact.js142
kunikenが2015/10/12に投稿(2016/10/05に編集)
http://qiita.com/kuniken/items/2fc5b782da5d302247ab

react-dom をインストールしてみる。

npm install react-dom –save

image

もう一度、

gulp browserify

image

(7)ブラウザで、index.html を開く

image

image

いきなり、hoge が表示されたが、どうやら、index.js のここに記載したものらしい。

image

試しに、この部分を、以下のように書き換えると、

image

このままではindex.htmlは変更なし。端末で、

gulp browserify

としてからindex.htmlを開くと、以下のようになる。

image

image

次は、

http://qiita.com/kuniken/items/c0f5ed06695ce52d4854

をやってみたい。

スポンサーリンク

Javascript

Posted by twosquirrel