React プロジェクトの作成と実行

Reactとは？

Reactは、Facebookが管理しているユーザーインターフェースを構築するためのオープンソースのJavaScriptライブラリです。ビュー層の構築に焦点を当て、コンポーネント化の方法を用いることで、開発者が複雑なユーザーインターフェースを効率的に構築できるようにします。Reactの核となる理念はコンポーネントと単方向データフローであり、これによりコードが理解しやすく、保守しやすくなります。

Reactの主要な特徴と利点

コンポーネント化：コンポーネントを使用してユーザーインターフェースを構築し、コードのモジュール化と再利用が容易になります。
仮想DOM：Reactは仮想DOMを使用してパフォーマンスを最適化し、必要な時にのみ実際のDOMを更新します。
単方向データフロー：データはコンポーネント間で単方向に流れ、アプリケーションの状態管理が明確で予測しやすくなります。
強力なコミュニティとエコシステム：Reactは大規模なコミュニティと豊富なサードパーティライブラリのサポートを持ち、開発が非常に便利です。

Reactを使用することで、開発者はモダンで迅速なレスポンシブWebアプリケーションを効率的に構築できます。

ServBayを使用したReactプロジェクトの作成と実行

この記事では、ServBayが提供するNode.js環境を使用してReactプロジェクトを作成および実行します。ServBayの「ホスト」機能を使用してWebサーバーを設定し、リバースプロキシと静的ファイルサービスを通じてプロジェクトにアクセスします。

Reactプロジェクトの作成

プロジェクトの初期化
まず、ServBayが提供するNode.js環境をインストールしていることを確認してください。その後、以下のコマンドを使用して新しいReactプロジェクトを初期化します：
bash
```
cd /Applications/ServBay/www
npx create-react-app servbay-react-app
```
1
2
依存関係のインストール
プロジェクトディレクトリに移動し、依存関係をインストールします：
bash
```
cd servbay-react-app
npm install
```
1
2

Reactプロジェクトの出力内容を変更

src/App.jsファイルを変更

src/App.jsファイルを開き、ウェブページの出力を"Hello ServBay!"に変更します：

javascript

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello ServBay!</h1>
      </header>
    </div>
  );
}

export default App;

開発モードに入る

開発サーバーの実行
開発サーバーを起動し、ポート（例：8585）を指定します：
bash
```
npm start -- --port 8585
```
1
これにより、ローカルに開発サーバーが起動し、ポート8585が公開されます。
ServBayホストのリバースプロキシを設定
ServBayの「ホスト」機能を使用して、リバースプロキシを通じて開発サーバーにアクセスします。ServBayの「ホスト」設定で新しいリバースプロキシを追加します：
- 名前：My first React dev site
- ドメイン名：servbay-react-test.dev
- ホストタイプ：リバースプロキシ
- IPアドレス：127.0.0.1
- ポート：8585
詳しい設定手順はNodejs開発サイトの追加を参照してください。
開発モードにアクセス
ブラウザを開き、https://servbay-react-test.devにアクセスしてプロジェクトをリアルタイムで確認します。ServBayはカスタムドメインと無料のSSL証明書をサポートしており、高いセキュリティを享受できます。

本番バージョンの構築

本番バージョンの構築
開発が完了したら、以下のコマンドを使用して本番バージョンを構築します：
bash
```
npm run build
```
1
構築が完了すると、生成された静的ファイルはbuildディレクトリに配置されます。
静的ファイルサービスの設定
ServBayの「ホスト」機能を使用して、静的ファイルサービスを通じて本番バージョンにアクセスします。ServBayの「ホスト」設定で新しい静的サイトを追加します：
- 名前：My first React production site
- ドメイン名：servbay-react-test.prod
- ホストタイプ：静的
- ウェブサイトのルートディレクトリ：/Applications/ServBay/www/servbay-react-app/build
本番モードにアクセス
ブラウザを開き、https://servbay-react-test.prodにアクセスして構築後の本番バージョンを確認します。ServBayのカスタムドメインと無料のSSL証明書により、サイトは高いセキュリティと信頼性を備えています。

以上の手順を通じて、Reactプロジェクトを作成・実行し、ServBayの機能を使用してプロジェクトを管理・アクセスすることができます。

React プロジェクトの作成と実行 ​

Reactとは？ ​

Reactの主要な特徴と利点 ​

ServBayを使用したReactプロジェクトの作成と実行 ​

Reactプロジェクトの作成 ​

Reactプロジェクトの出力内容を変更 ​

開発モードに入る ​

本番バージョンの構築 ​