React プロジェクト説明

典型的な React プロジェクトは複数のファイルとフォルダで構成され、各部分にはそれぞれ固有の役割があります。

この章では、React プロジェクトのコードについて基本的な説明を行い、プロジェクトの構造と各部分の機能を理解するのに役立ちます。

  • React プロジェクトは複数のファイルとフォルダで構成され、コアファイルには以下のものがあります。index.html、index.jsとApp.js。

  • React コンポーネントはアプリケーションの基本的な構成要素であり、関数コンポーネントまたはクラスコンポーネントにすることができます。

  • JSX は React の中心的な構文であり、UI を記述するために使用されます。

  • Props と State は、React コンポーネントでデータを管理する主要な方法です。

プロジェクト構造

React プロジェクトには通常、次のファイルとフォルダが含まれます：

my-react-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── index.html      # 应用的 HTML 模板
│   └── ...             # 其他静态资源（如图片、字体等）
├── src/                # 项目源代码
│   ├── App.js          # 主组件
│   ├── App.css         # 主组件的样式
│   ├── index.js        # 项目入口文件
│   ├── index.css       # 全局样式
│   └── ...             # 其他组件和资源
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
└── README.md           # 项目说明文档

コアファイルの解説

public/index.html

public/index.htmlReact アプリケーションの HTML テンプレートファイルです。

React はコンポーネントを<div id="root"></div>内にレンダリングします。

React はコンポーネントを
内にレンダリングします。

実例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js

src/index.jsReact アプリケーションのエントリファイルです。

src/index.jsルートコンポーネント（通常は App）を index.html 内の div#root にレンダリングする役割を担います。

実例

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

src/App.js

src/App.jsReact アプリケーションのルートコンポーネントです。

src/App.js通常、アプリケーションの主要なロジックと構造を含みます。

実例

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

src/App.css

src/App.css App コンポーネントのスタイルファイルです。

実例

.App {
  text-align: center;
  margin-top: 50px;
}

src/index.css

src/index.cssグローバルスタイルファイルであり、通常、グローバルスタイルの定義やブラウザのデフォルトスタイルのリセットに使用されます。

実例

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

package.json

package.jsonこれはプロジェクトの設定ファイルで、プロジェクトのメタデータ、依存関係、スクリプトが含まれます。

実例

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start", // 開発サーバーを起動
    "build": "react-scripts build", // 本番環境コードをビルド
    "test": "react-scripts test",   // テストを実行
    "eject": "react-scripts eject"  // 設定を展開（上級者向け）
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}

React コンポーネントの基本構造

React コンポーネントは React アプリケーションの中核となる構成要素です。

1つのコンポーネントには通常、次の部分が含まれます：

1、関数コンポーネント

関数を使用して定義されたコンポーネント。

実例

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h2>これは関数で定義されたコンポーネントです</h2>
    </div>
  );
}

export default MyComponent;

説明：

  • import React from 'react';： React ライブラリをインポートします。React はユーザーインターフェースを構築するための JavaScript ライブラリです。

  • function MyComponent() { ... }： これは関数コンポーネントです。関数コンポーネントは JSX を返す JavaScript 関数です。

  • return (...)： コンポーネントのreturnステートメントは JSX 要素を返します。JSX は JavaScript の構文拡張であり、JavaScript 内で HTML に似たコードを記述できます。

  • export default MyComponent;： ～をMyComponentコンポーネントをデフォルトエクスポートとしてエクスポートします。これにより、他のファイルはimport MyComponent from './MyComponent';を使用してこのコンポーネントをインポートして使用できます。

2、クラスコンポーネント

クラスを使用して定義されたコンポーネント（現在ではあまり使用されておらず、関数コンポーネントが推奨されます）。

実例

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h2>これはクラスコンポーネントです</h2>
      </div>
    );
  }
}

export default MyComponent;

説明：

  • import React from 'react';： React ライブラリをインポートします。これは React を使用するための基本です。

  • import { Component } from 'react';： React ライブラリからComponentクラスをインポートします。ComponentReact クラスコンポーネントの基底クラスであり、すべてのクラスコンポーネントはこれを継承する必要があります。

  • class MyComponent extends Component { ... }： という名前のMyComponentクラスコンポーネントを定義します。これはComponentクラスを継承しているため、React クラスコンポーネントの機能（ライフサイクルメソッドや状態管理など）を使用できます。

  • render() { ... }: renderクラスコンポーネントで必ず実装する必要があるメソッドです。コンポーネントの UI 構造（JSX）を返す役割を担います。

    • return (...)： JSX 要素を返し、コンポーネントの UI を記述します。

    • <div><h2>这是一个类组件</h2></div>： これは単純な JSX 構造で、divとh2見出しが含まれています。

  • export default MyComponent;： ～をMyComponentコンポーネントをデフォルトエクスポートとしてエクスポートします。これにより、他のファイルはimport MyComponent from './MyComponent';を使用してこのコンポーネントをインポートして使用できます。

3、JSX

JSX は JavaScript の構文拡張であり、JavaScript 内で HTML に似たコードを記述できます。

実例

const element = <h1>Hello, JSX!</h1>;

4、Props

Props はコンポーネントの入力パラメータであり、親コンポーネントから子コンポーネントへデータを渡すために使用されます。

実例

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="React" />;
}

5、State

State はコンポーネントの内部状態であり、コンポーネントのデータを管理するために使用されます。

実例（useState Hook を使用）

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

React プロジェクトの実行フロー

開発サーバーの起動

～を実行しnpm start 或 yarn start開発サーバーを起動します。

ブラウザで http://localhost:3000 にアクセスし、アプリケーションを確認します。

本番環境コードのビルド

～を実行しnpm run build 或 yarn build最適化された本番環境コードを生成します。

テストの実行

～を実行しnpm test 或 yarn testプロジェクトのテストケースを実行します。

その他の拡張