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}
...
}
*/