React

はじめに

Reactとは

公式ドキュメント

JSX記法のルール

// Reactコンポーネントを書く場合、お作法としてreactのインポートが必要（React17のアップデートでJSXを使用するだけの場合は記述不要になった）

import React from "react";

// htmlにコンポーネントを反映するために、react-domをインポートする

import ReactDom from "react-dom";




// Reactでは関数を使用して画面の要素であるコンポーネントを表現していけるので、アロー関数を書いていく

const App = () => {

 return (

  <> 

   <h1>こんにちは！</h1>

   <p>お元気ですか？</p>

  </>

 );

};




// Appをコンポーネントとしてレンダリングする

// 第一引数にレンダリングしたいコンポーネント、第二引数に反映箇所を指定する

ReactDom.render(<App />, document.getElementById("root"));

まとめ

jsxはjavascriptの中にHTMLを書いていく。
ファイル拡張子はjsxとする。
returnの内容が複数になる場合は（）で囲う必要がある。
returnしていく内容は1つのタグで囲わないとエラーになるので、フラグメント（<></>）で囲ってあげる。