Reactの記法について学ぶ

学んだこと

JSX の記法ルール

• 関数名を定義するときは、パスカルケース(先頭大文字始まり)で書くルールがある。
• 関数を呼び出すときは<関数名/>で呼び出す事ができる。

• render するときに必ず strictMode を付ける必要がある

//------reactプロジェクトで必ず書く処理-------------
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render();
//----------------------------------------------

const App = () => {
  return <h1>こんにちは！</h1>;
};

root.render(
  // StrictMode: 処理をチェックし、予期せぬ動作を引き起こしている処理がないかチェックしてくれるモード
  // react側では推奨しているモードになるので、開発時には付けておいた方が良い
  <StrictMode>
    <App />
  </StrictMode>
);

• 関数内で html を複数渡す場合、以下の様に記述する。
  • 戻り値で返却するときの記法が様々あるが、プロジェクトによりけり。

//------reactプロジェクトで必ず書く処理-------------
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render();
//----------------------------------------------

const App = () => {
  return (
    <div>
      <h1>こんにちは！</h1>
      <p>お元気ですか</p>
    </div>
  );
};

// この書き方でもOK
const App = () => {
  return (
    <React.Fragment>
      <h1>こんにちは！</h1>
      <p>お元気ですか</p>
    </React.Fragment>
  );
};

// この書き方でもOK
const App = () => {
  return (
    <>
      <h1>こんにちは！</h1>
      <p>お元気ですか</p>
    </>
  );
};

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

コンポーネントの使い方

• main.jsx
  • import するときはimport {呼び出したい関数} from 'コンポーネントのパス'でインポートすることができる。
  • 必ず関数名はパスカルケースで書く。React で決まっている。

//------reactプロジェクトで必ず書く処理-------------
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import { App } from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

//----------------------------------------------

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

• 外部で呼び出したい関数にはexportを先頭につける。付けると外部で呼び出すことができる。
• エディタにもよるが、外部で呼び出した際 Import 文を勝手に記述されている。
  • 当たり前だが、記述されていない場合は、自分で import 文を書く必要がある。

export const App = () => {
  return (
    <>
      <h1>こんにちは！</h1>
      <p>お元気ですか</p>
    </>
  );
};