Reactを開発した理由はフェイスブックでフェイスブックのUIをより良く作るために悩んでいるReactです.最も簡単に考えるとreactはJavaScript UIライブラリと考えられる.
では、正式にRESTARTを学ぶ前に、ライブラリとフレームワークの概念となぜRESTARTを書くのかを理解しておきましょう.

What is Framework and Library?

この2つの概念をより容易に理解するために、F 1レーシングカーを作る過程を例に挙げます.
F 1レーシングカーを作る過程で、必ず使う要素とメニューに従って組み立てる約束に従わなければなりません.
これらの要素とともに守られる規範がフレームワークです.
F 1レースを作るにはいろいろな道具が必要です.すべてのF 1レーシングカーが同じではないため、各レーシングカーを作成する際に、エンジニアは特定のツールを使用してレーシングカーを組み立てます.
レーシングカーを作成するときに必要なツールはライブラリです.

JSX

Reactを使用するには、JSXという特殊な構文を理解する必要があります.JSXはJavaScriptの拡張版です.Syntax Extension for JavaScriptと申します.
JSXは、HTML構文をJavaScriptコードに書き込むことができます.必要に応じてjsファイルの任意の場所で作成できます.

const hi = <p>Hi</p>;
const myFavoriteThings = {
	food: <li>salad</li>
    animal: <li>dog</li>
    hobby: <li>golf</li>
};

JSX attribute

attribute(プロパティ)をマークする場合は、常に" "の二重引用符で囲まれています.
classを希望する場合、元の属性面はclassですが、JSXはclassNameを使用します.

const myFavoriteThings = {
	food: <li>salad</li>,
  	animal: <li>dog</li>,
  	hobby: <li className = "list-item">programming</li>
};

Self-Closing Tag

JSXでは、どのタグでも常にself closting tagを使用できます.

<div />와 <div></div>는 같은 표현입니다.

Rendering

html要素やリトラクト要素などのコードを描くと、目で見えるのがレンダリングです.ReactDOM.render関数を使用して、リトラクト要素をスクリーンにレンダリングします.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);