📌

React初学者が最初に触れること

に公開
React
react初心者
tech

経緯

・Reactの学習をはじめました。学習したことのアウトプットがてら、Reactプロジェクトで一番最初に触れるポイントをまとめます。

前提

CodeSandboxでReactプロジェクトを作成するパターンを想定。
https://codesandbox.io/

プロジェクト展開直後。

１．Reactプロジェクトの理解

Reactの仕様について、簡単にまとめておきます。
CodeSandboxでReactプロジェクトを作成すると、
下記のような構成のファイルが作成されます。
index.jsから見ていきます。

my-react-app/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   ├── App.js
│   └── style.css
└── package.json

index.jsにおいて重要な記述は下記です。

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

上記の記述は何をしているかというと、rootオブジェクトに対し、render関数で（）内に記載してある＜App＞コンポーネントを描写しています。
つまりこれによって、「HTMLの（<div id="root">）」内を JavaScriptで記述可能な支配下に置くことができます。

実際に自動生成されるHTMLファイルを確認すると、<div id="root"></div>という記述があり、
こちらの中身をReactで記述していくイメージです。

<body>
	<noscript>
		You need to enable JavaScript to run this app.
	</noscript>
	<div id="root"></div>
	<!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

もう一点重要な点は、index.js上には実際に表示されるコードを記述していないという点です。
実際のUIは同じく自動で作成されるApp.jsの関数コンポーネント内に記述します。
こちらの関数のreturnにHTMLを記述し、exportすることで、index.jsで<App>として使用することができます。

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

２．default exportとnamed export

Reactでは、コンポーネント側での関数の定義方法が2つあります。

  • default exportの場合1つのファイルにつき、1つの関数しかexportできません。
  • named exportの場合1つのファイルに複数の関数を定義可能です。

初心者が学習する上ではdefault exportでも問題なく開発できるかもしれませんが、
named exportの方が柔軟性が高い印象を受けました。
default exportをnamed exportの記述に変えます。

defaul exportの定義

export default function App() {
  return (
  );
}

named exportの定義

export const App=()=> {
  return (
  );
}

default export呼び出し側（index.js）

//import先./Appの関数は一つしかないため、一つ目のAppの記述は別の名前にすることも可能。
import App from "./App";

named export呼び出し側（index.js）

//{}が必要。{App}はexport時に指定した名前にする必要がある。
import { App } from "./App";

Discussion