React.js 超入門 〜これから始めるReact.js〜
みなさん、こんにちは。kidou_kazeです。
UI を作るための JavaScript ライブラリである Reactについて一緒に学びましょう。
React は Facebook が中心に開発しているライブラリで Facebook でも使われていたりしますね。
かなり複雑な UI でも効率的に開発していくことができて、部品単位で開発していくことで拡張性の高いプログラムを組むことができるのがReactの長所です。
開発においてはJavascriptの規格であるES6を使用することが多いです。
Reactでの開発を行うのであれば、 まずは React 開発で便利な Chrome の拡張機能を入れておきましょう。
こちらは、Facebookから公式で提供されているデバッグ用ツールです。
React Developer Toolsを使うと、コンポーネントツリーの構造、各コンポーネントに渡されているPropsの値、現在のStateの値といったことが視覚的に確認できるようになります。
使い方はすごくわかりやすいこの方の記事を参考にしてください。
React.jsを試す
React.js公式ページの「download this HTML file」からHTMLファイルを入手し、Reactに簡単に触れることができます。
Reactは以下の2行をheadタグ内に入れることで始められます。
<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
JSXというjavascriptの新しい文法を使うためにもう１行追加します。
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
これでJSXのスクリプトもjavascriptに自動で変換されます。
入手したHTMLファイルを見ると、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
</script>bodyタグに上記のように記述することで
Hello,world!
と表示されます。
React で作った部品を描画する際、ReactDOM.render()を使います。
<h1>Hello, world!</h1>が描画する内容で、
document.getElementById('root')が表示させる要素となっています。
よってid="root"の要素に<h1>Hello, world!</h1>が入り込み、ページにはHello,world!と表示されるわけです。
React.jsの印象がある程度は掴めたのではないでしょうか?
これから更にReact.jsを学んでいきましょう。
最後まで読んでいただきありがとうございました。
