この記事の目的

• Reactの理解とアウトプット、振り返り用
• Reactでよく使われている基本的な技術を言語化できるようする

JSX記法のルール

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

// Reactでは関数を使用して画面の要素であるコンポーネントを表現していけるので、アロー関数を書いていく
const App = () => {
 return (
  <> 
   <h1>ReactJSX記法のルール</h1>
   <p>React学習中</p>
  </>
 );
};
// Appをコンポーネントとしてレンダリングする
// 第一引数にレンダリングしたいコンポーネント、第二引数に反映箇所を指定する
ReactDom.render(<App />, document.getElementById("root"));

JSX記法のルールまとめ

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

コンポーネント

コンポーネント：Reactで画面に表示される部品のことで、表示に必要なデータや処理などを1つのオブジェクトにまとめたものです。画面に表示するための部品を作ることによって、いつでも簡単に組み込むことで部品を再利用することができます。

import React from "react";
import ReactDom from "react-dom";

const App = () => {
  return (
    <> 
   　<h1>ReactJSX記法のルール</h1>
   　<p>React学習中</p>
    </>
  );
};

// コンポーネントをエクスポートして、他のファイルでインポートできるようにする。
export default App;

コンポーネントまとめ

• コンポーネントとは画面要素の1単位。大（1画面）から小（1つのテキストボックス）まで様々。
• コンポーネント名は必ず先頭を大文字から始めるようにする。
• コンポーネントをエクスポートして、他のファイルでインポートできるようにする。

参考資料

React公式ドキュメント
React公式チュートリアル