[Tencent Cloud Studio 実践トレーニングキャンプ] React をすばやく構築して注文 H5 ページを完成させる

I.はじめに

1.1 関連リンク

 公式サイトアドレス：クラウドスタジオ

 公式ドキュメントのアドレス: Cloud Studio の概要 (Cloud IDE) | Cloud Studio

1.2 Cloud Studio (クラウド IDE) の概要

• Cloud Studio はブラウザベースの統合開発環境 (IDE) であり、利用時に Cloud Studio をインストールする必要がなく、ブラウザを開くだけでいつでもどこでもオンラインでプログラミングできるため、開発者にとって大きな利便性をもたらします。
• オンライン IDE として、Cloud Studio には、コードのハイライト表示、オートコンプリート、Git 統合、ターミナルなどの基本的な IDE 機能が含まれており、リアルタイム デバッグ、プラグイン拡張機能などもサポートしているため、開発者は開発を迅速に完了できます。 、さまざまなアプリケーションのコンパイル、展開。

1.3 実験の紹介

リモート オフィスのシナリオによく遭遇します。次に、クラウド IDE Cloud Studio を使用して、モバイル React H5 注文システム ページの簡易バージョンを 0 から 1 まで迅速に構築、開発、復元し、クラウドによってもたらされる利点を体験します。 IDE. さまざまな環境をインストールする必要がなく、使いやすく、すぐに使い始めることができます。

最終的な効果は以下の通りです。

第二に、開発前の準備

2.1 公式サイトを開く

以下のリンクをクリックすると公式サイトに飛び、「登録・ログイン」をクリックします。

クラウドスタジオ公式サイト

2.2 Cloud Studio を登録します。 

ここで Cloud Studio に登録してログインすると非常に便利で、次の 3 つの登録方法が提供されています。

• CODINGアカウントを使用して登録・ログインを許可します（この記事で使用する方法）
• WeChat認証による登録/ログイン
• GitHub認証で登録/ログインする

 WeChat を選択し、WeChat ボタンをクリックし、ポップアップ QR コードをスキャンしてログインを承認します。 

認証が成功すると、Cloud Studio のホームページにジャンプできます。Cloud Studio には多くのテンプレート (フレームワーク テンプレート、クラウドネイティブ テンプレート、Web サイト テンプレート) が用意されており、それらはすべてすぐに使用できることがわかります。同時に、Cloud Studio は新旧すべてのユーザーもサポートしており、毎月 3,000 分の無料ワークスペース時間が与えられます。

このプロジェクトは React フレームワークを使用しています。React テンプレートを直接クリックして React ワークスペースの初期化を開始できます。しばらくすると初期化が完了し、React プロジェクト ファイルが取得されます。

この時点で、新しいホストを使用する場合は、ブラウザさえあれば、環境を準備したり、ソフトウェアをインストールしたりする必要はなく、インターネットに接続できれば十分であることがわかります。 React プロジェクトを数分で初期化できます。これは非常に簡単で便利です。

 3. 簡易版の発注システムを開発する

 主な目的は、React H5 ページを開発することです。迅速な開発のために、UI コンポーネント ライブラリがよく使用されます。ここでは、antd-mobile UI ライブラリを使用します。antd-mobile は、Ant Design のモバイル仕様の React 実装です。

3.1 antd-mobileのインストール

antd-mobile は、ツリー シェーキングに基づくオンデマンド読み込みをサポートしており、ほとんどのビルド ツール (webpack 4+ やロールアップなど) はツリー シェーキングをサポートしているため、ほとんどの場合、追加の構成を行わずにパッケージ サイズを小さくできます。

$ yarn add antd-mobile@^5.32.0
# or
$ npm install --save antd-mobile@^5.32.0

3.2 インストールの削減 

通常、React プロジェクトを開発するとき、スタイル開発に Less と Sass を使用することがありますが、React はデフォルトで Sass を統合しているため、Less を書き慣れている友人には非常に不親切なので、React プロジェクトで Less を設定する必要があります。

インストールするローダーの数が減ります。

yarn add -D less@^3.12.2 less-loader@^7.0.1

ここで、バージョンを指定せずに上位バージョンをインストールすると、プロジェクトの起動に失敗することに注意してください。

3.3 Webpack 設定ファイルの公開

webpack.config.js で構成します。この構成では React の構成構成ファイルを公開する必要があります。警告: この操作は元に戻すことができません。

npm run eject

 「y」を入力すると、プロジェクトが自動的に分解されます。

コマンドが完了すると、プロジェクトのルート ディレクトリに config フォルダーが表示され、このフォルダーにはいくつかの構成関連のスクリプトが含まれており、package.json には「dependency」などのさらに多くの属性値があることも確認できます。

config/webpack.config.js ファイルを見つけて、キーボードの「Ctrl+F」をクリックし、入力ボックスで「スタイル ファイル」を検索します。 

ここに次の 2 行のコードを追加します。

const lessRegex = /\.(less)$/;

constlessModuleRegex = /\.module\.(less)$/;

次に、検索ボックスに「sassRegex」と入力します。

sass の設定に従って、設定を減らします。 

// less
{
  test: lessRegex,  // 有改动
  exclude: lessModuleRegex,  // 有改动
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    'less-loader'  // 有改动
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,  // 有改动
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'  // 有改动
  ),
},

これで webpack.config.js でのlessの設定が完了し、プロジェクトでlessスタイルを使用できるようになります。

3.4 インストールの正規化 

Normalize.css は、CSS リセットの最新の代替手段であり、デフォルトの HTML 要素のスタイル設定において、ブラウザー間での強力な一貫性を提供します。Normalize.css は、従来の CSS リセットに代わる最新の HTML5 対応のプレミアムな代替手段です。

yarn add -D normalize.css@^8.0.1

 以前は、サーバー コードをアップロードするには、Scp コマンドを使用するか、リモート SSH プラグイン サポートをインストールする必要がありました。Cloud Studio では、デフォルトでファイルのアップロードやダウンロードなどの日常的な操作を簡単にサポートでき、ローカル IDE エクスペリエンスと一致します。 :

• ファイルを IDE 編集領域に直接ドラッグすることもできます (この記事で使用した方法)。
• IDE編集エリアを右クリックして「アップロード」

img フォルダーを src ディレクトリにドラッグするだけです 。(クリックして img 圧縮パッケージをダウンロードします)

 3.5 App.js メインファイルを置き換える

v>
                    <div className="cart">
                      <img style={
   
   {
                        display: 'block',
                        width: '30px',
                        marginRight: '5px'
                      }} src={ CartImg } onClick = { () =>
                        Toast.show({
                          content: '添加购物车成功'
                        }) }></img>
                    </div>
                  </div>
                )
              })
            }
          </div>
        </div>
      </div>

      <TabBar>
        {tabbars.map(item => (
          <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={item.title}
            badge={item.badge}
          />
        ))}
      </TabBar>
    </div>
  );
}

export default App;

src ディレクトリに、index.less ファイルを作成し、次の関連性の低いコードをそのファイルにコピーします。

.head-card {
  padding: 10px 20px;
  box-sizing: border-box;
}

.flex-center {
  display: flex;
  align-items: center;
}

.product-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(100vh - 45px - 130px - 50px);
}

.product-right {
  flex: 1;
  height: 100%;
}

.product-title {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  text-align: left;
  padding-bottom: 10px;
}

.product-list {
  height: calc(100% - 24px);
  overflow-y: auto;
}

.product-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  &-left {
    display: flex;
    &-info {
      padding-left: 3px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &-name {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #000000;
        text-align: left;
      }
      &-number {
        padding-top: 3px;
        font-family: PingFangSC-Regular;
        font-size: 11px;
        color: #787878;
        text-align: left;
      }
      &-price {
        font-family: PingFangSC-Regular;
        font-size: 18px;
        color: #FF1800;
        text-align: left;
      }
    }
  }
}

.cart {
  position: absolute;
  right: 10px;
  bottom: 0;
}

コピーが完了したら、コンソールで 「yarn start」と入力してプロジェクトを開始します。

• Cloud Studio には、ウェブ アプリケーションをリアルタイムで表示できるプレビュー プラグインが組み込まれています。コードが変更されると、プレビュー ウィンドウが自動的に更新され、Cloud Studio でウェブページをリアルタイムで開発およびデバッグできます。
• このプロジェクトはモバイル H5 プロジェクトであるため、スタイルを表示するには「デバイスの切り替え」ボタン (下図で黄色でマークされている) を開く必要があります。
• 携帯電話でのデバッグ用に QR コードが提供されています (下図の緑色でマークされています)。 
• 下図の赤いマークをクリックしてブラウザでページを開き、アドレスをコピーして他の人と共有するとページが表示されます（設定は必要ありません）。

3.6 ウェアハウスの公開

投稿する前に、README.md ファイルに記入してください。

# 项目说明

这是一个用 IDE [Cloud Studio](https://www.cloudstudio.net/?utm=csdn) 快速搭建，并开发还原一个移动端 React H5 的简版点餐系统页面，从 0 到 1 体验云 IDE 给我们带来的优势，不需要装各种环境，简单易用，开箱即可上手。

## 相关技术栈

React + less + webpack

## 项目运行

yarn install
yarn start

左側の機能メニュー領域で「ソースコード管理」を見つけます。

 上図の「ウェアハウスの初期化」ボタンをクリックするか、「git init」を使用してウェアハウスを初期化します。

git init

送信するメッセージ情報を入力し、「コミット」をクリックしてウェアハウスを送信します。

 

 github のメール アドレスとユーザー名を入力します

 ここでコードを GitHub または CODING にホストするかを選択できます。私は GitHub を選択します

または、ここで設定アイコンをクリックして、関連するアカウントを追加します 

 

「ブランチを公開」ボタンをクリックすると、関連するアカウントが表示されます。アップロードしたいアカウント名を選択します。

 

 

 この時点で、プロジェクトは GitHub にアップロードされました。

4、開発スペース

Cloud Studio クラウド IDE のワークスペース リスト ページでは、ワークスペースを実行、停止、削除、復元できます。

4.1ラン

対応するワークスペース カードをクリックすると、新しいページでスペースが開いて実行され、ワー​​クスペース カードに「実行中」のステータスが表示されます。

4.2ストップ

「実行中」状態のワークスペースの場合は、カード右側の[停止]をクリックしてワークスペースの実行を停止します。

4.3 削除

ワークスペースカード右下の[削除]をクリックして削除することで、起動していないワークスペースを削除できます。

誤って削除することを防ぐため、削除されたワークスペースは以下の「削除されたワークスペース」リストに表示され、24 時間保持されます。その前に、いつでも [復元] をクリックしてワークスペースを復元できます。24 時間以上復元されなかったワークスペースは永久に破棄されます。

五、まとめ 

5.1 機能の概要

1. クラウド開発: Cloud Studio はブラウザベースの統合開発環境 (IDE) であり、ブラウザがある限り中断されずに使用できるクラウド ワークステーションを開発者に提供します。Cloud Studio では、独自のクラウド サーバーへの接続もサポートされているため、エディターでクラウド サーバー上のファイルを表示し、オンライン プログラミングとデプロイメントを実行できます。

2. プリセット環境: Cloud Studio の事前構成された環境を使用すると、面倒な環境構成を行わずに、対応するタイプのワークスペースを直接作成し、プロジェクトを迅速に開始して開発状態に入ることができます。

3. Web ページをリアルタイムでデバッグする: Cloud Studio には、Web ページ アプリケーションをリアルタイムで表示できるプレビュー プラグインが組み込まれています。コードが変更されると、プレビュー ウィンドウが自動的に更新されるため、Cloud Studio でリアルタイムでウェブページの開発とデバッグを行うことができます。

4. 複数のテンプレート：開発者はワンクリックで言語体系に対応したテンプレートファイルを作成し、直接開発できるため、操作が簡単で時間と労力を節約できます。

5. プラグイン拡張: デフォルト構成ではニーズを満たせない場合は、VS Code プラグインをオンラインでインストールしてユーザー エクスペリエンスを向上させることができます。

5.2 最適化の提案

1. より詳細なドキュメントを提供する: 現在の Web サイトのヘルプ ドキュメントは比較的簡潔であり、さまざまな可能性があまり包括的ではありません。 

2. 複数のスペース テンプレートを同時に開くことができるようにすることをお勧めします。現在スペース テンプレートを開くには、実行中の別のテンプレートを閉じる必要があります。

3. より最適化されたパフォーマンスと安定性の提供: 現時点では、Web サイトのパフォーマンスと安定性にはまだ改善の余地があり、フリーズやクラッシュなどの問題が発生する場合があります。ユーザー エクスペリエンスを向上させるために、プラットフォームのパフォーマンスと安定性の最適化を検討することをお勧めします。

4. 現在サポートされている言語は限られており、より多くの言語を統合できます。