Reactとは
1. Composable コンポーネント指向
Reactはコードを細分化することができます。
従来のHTMLだとヘッダーからフッターまでコードを同じページに書くので、見通しが悪いです。
しかし、Reactでは下記のようにコンポーネントに分けて、それらを組み合わて使います。
コンポーネントに分けることによって、管理しやすくなり、様々な場所で再利用することができます。
<body>
<Header />
<Main />
<Footer />
</body>
2. Decleartive 宣言型
Decleartiveとは、宣言型。
簡単にいうと、「どうやるかではなく、何をするか教えて！」 といった感じです
反対の意味でImperative(命令型)があります。
こちらは 「どうやるか一から教えてください！」 と手順を命令する必要があります。
宣言型のReact vs 命令型のVanilla JavaScriptを見てみます！
例としてブラウザに<h1 class="header">Hello World!</h1>を出力します。
React
ReactDom.render(<h1 className="header">Hello World!</h1>, document.getElementById('root'))
Vanilla JavaScriptで書き直すと、、
Vanilla JS
const h1 = document.createElement("h1");
h1.textContent = "Hello World!";
h1.className = "header";
document.getElementById("root").append(h1);
React(JSX)を使うことで、より短く直感的に書くことができますね。
JSX
次にReactを使う上で欠かせないJSXについてです。
JSXとは、JavaScript風のHTMLです。(と認識してます。）
JSXを使うことでHTMLのように直感的に書くことが可能になります。
JavaScript
const h1 = document.createElement("h1");
h1.textContent = "Hello";
h1.className = "header";
console.log(h1)
ReactDOM.render(element, document.getElementById("root"));
//コンソール出力結果: <h1 className="header">Hello</h1>
JSX
const element = <h1 className="header">This is jsx</h1>
console.log(element)
ReactDOM.render(element, document.getElementById("root"));
/* コンソール出力結果： JSオブジェクトを返す
{
...
props: {
className: 'header',
children: 'This is jsx'
}
ref: null
type: "h1"
_owner: null
_store: {validated: false}
...
}
*/