初めてのREACT

自分は都内の自社開発企業にてフロントエンドをしているのですが、
実務でangularやvueはよく触っているのですがREACTに関しては全くわかりません笑
世の中の求人サイトを見るとREACTでの開発経験を求めている企業が多い中お勉強がてらメモとして残していきたいと思います！

ちなみに環境を作るのが少し面倒なので、JSX,REACT,REACT DOMが既に入っているこちらのIDEを使って学んでいきたいと思っています。
https://jscomplete.com/playground

REACTでHello World

通常のJSでHello Worldをする場合は

document.querySelector("html").innerHTML = "Hello World";

になりますよね。

一方REACTでは

function Hello() {   
return <div>Hello World!</div>; 
} 
REACTDOM.render( 
<Hello />, 
document.querySelector('html'),
);

2行目で書かれているものはHTMLの形式をしたjsxになります。この状態だけで出力しても表示はされません。
jsxの拡張機能を使用して2行目がjsx→REACT APIにコンパイルされブラウザが表示されるようになっています。
(正確にはbabelを使用してコンパイルしているようです。興味がある方はこちら)

したがって、2行目はREACT APIでも書くことができます。

function Hello() {   
return REACT.createElement('div',null,'Hello World');
} 
REACTDOM.render( 
<Hello />, 
document.querySelector('html'),
);

まとめ

ここまででJSXの挙動をなんとなく確認できたと思います。
ひとまず今日はここまで、次はボタンを使ったクリックイベントをREACTでやってみたいと思います。
お疲れ様でした！

ブログの投稿ログ

初めてのREACT