はじめに
Fullstack React: 30 Days of React の意訳です。
ちょいちょい読んでるのでせっかくなので訳そうと思った次第。飽きるまで続きます。
ぼく自身はjQueryおじさんで、あんまりJSまわりへの理解も深くないのでなんか間違っていたら指摘よろしくです。
終わったらをこっちを買う予定。
Fullstack React 🐬 Book - The Complete Guide to ReactJS and Friends
本編
Reactの何が良いのか説明していく。
What is React?
Reactは、Javasrciptのライブラリでwebアプリのviewレイヤーを担当する。
Reactの肝はコンポーネントです。コンポーネントは自己完結型のモジュールで、コンポーネントを使ってボタンとかテキストインプットとかを作ることができる。
あと、コンポーネントは内部に他のコンポーネントを持てる。つまり複数のコンポーネントを組み合わせて別のコンポーネントを作れる。
実際にReactを使ってアプリを書こうとするといろんなコンポーネントを作ることになる。１つ１つの単純なコンポーネントを組み上げて1つのアプリを作る。
例えばフォーム。フォームは、いろんな要素（ボタンとかラベルとインプット）からできてるけど、それらの要素1つ1つをReactで書くことができて、それらを使ってフォームコンポーネントを作ることができる。フォームコンポーネントでは、ボタンとかラベルとインプットをどこか置くかとか、そういうことを決めてあげればよい。
それぞれのコンポーネントは厳密なデータを管理する原則に従う。複雑なUIは複雑なデータを持ちがち。Reactは、いろんな状況でUIがどのように見えるか、すぐにわかる感じに限定して使えるツールを目指してるっす。あとの章で深掘ります。
Okay, so how do we use it?
ハローワールドな！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world</h1>,
document.querySelector('#app')
);
</script>
</body>
</html>
数行のJSでHello Wroldが出てるのでビビるかもしんないけど、いくつかのライブラリをインクルードする必要があるよ！
How does it work?
ReactはブラウザのDOMを直接いじるんじゃなくて、バーチャルDOMを操作するよ。
ブラウザのDOMを直接いじるとすごく遅くなることがあるので、 React Virtual DOM を通じてDOM操作をすることで、そうならないようによきようにVirtual DOMがやってくれます。
Day 2は実際にコンポーネント作る！あと、JSXにも触れていく！