これからReactについて、書いていく予定です。
毎週１〜２回投稿する予定になります！
興味がある方是非ご覧下さい！
本章はReactの基礎を紹介して行きます。
よろしくお願いします。
#Reactとは
ReactはJavaScriptで構築したJavaScriptのライブラリーの一種です。
Facebook社が2013年で開発にしたライブラリーで、
Twitter, Airbnb, Uberなどの大手企業で採用されております。
#Reactの考え方
・コンポーネント指向
ページは色んなパーツ（コンポーネント）で構成しています。
一つ一つのコンポーネントを組合わせてWebApplicationを作ります。
一つのコンポーネントが変化すると、そのコンポーネントだけがレンダリングして
他の部分は変わらないままです。(一番シンプルな影響として、UXがよくなります)
#Reactができること
1.WebApplication
2.Android と IOS の APP
（React Native： Reactの書き方でAndroidとIOSを同時に作れます。)
#Reactの書き方（JSX）
簡単にイメージすると言うと、
Scriptタグ内またはJSファイル内でHTMLを書くことです。
こちらでは、簡単にJSXを理解する程度で大丈夫です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<!-- ↓ （ここからはJSX） Script内でHtmlを書ける -->
<!-- ↓ babelでReactに適用できるJSの書き方に変換されます。 -->
<script type="text/babel">
// htmlをレンダリング
ReactDOM.render(
<h1>hello world</h1>,
document.getElementById("app")
)
</script>
<!-- ↑ （ここまではJSX） -->
<!-- ↓ （ここからは通常のHTMLの書き方 JavaScriptをImport） -->
<!-- ↓ HTMLファイルなので、イメージしやすい為に今回はこの形でReactを引用します。 -->
<script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
<!-- ↓ babelはReactの書き方を変換する為のライブラリーになります。（主にJavaScriptの書き方の変換で使う） -->
<!-- 今回紹介するのはReactなので割愛します。 -->
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</body>
</html>
上記のコードをHtmlを打ち込めば、ブラウザでHello Worldが見えます。
・実際にbabelはどんな動きしたのは見てみましょ。
https://babeljs.io/
babelのホームページにアクセスして、上部のTry it outをクリック
左側のreactをチェックを入れて、先ほどのJSXコードを貼り付けてください。
ReactDOM.render(
<h1>hello world</h1>,
document.getElementById("app")
)
JSコードに変換
↓↓↓↓↓↓↓↓
ReactDOM.render(React.createElement(
"h1",
null,
"hello world"
), document.getElementById("app"));
この様なイメージになります。
#最後に
今回のReactの簡単な紹介はここまでです。
このシリーズはReactの基本知識を紹介して行く予定になります。
例えば：
・WebPackでReactの環境構築
・React-router
・Create-react-appなど
興味がある方は是非読んでください。