Reactでレシピシステムを実装する方法を解説した記事

Reactでレシピシステムを実装する方法を解説した記事

1. レシピ集

1.1 プロジェクトの背景

自宅で健康的な食事をとるというコンセプトが人気を集めています。調査によると、都市部のホワイトカラーや若者の90%以上が、特に子供のいる家庭では、家で食事をすることを好むという。一般的に、家で食事をすると幸せを感じると信じているからだ。経済の急速な発展に伴い、人々の生活水準は徐々に向上し、食品の品質に対する要求はますます高くなっているが、都市部の慌ただしい生活により、サラリーマンは食事に目的意識を持たなくなり、たいていは時間になったら適当に食べ物を選んでお腹を満たしているだけである。このグルメウェブサイトは、新しい健康的なライフスタイルを提唱しています。ユーザーは、ウェブサイトで提供されるレシピに基づいて、さまざまな料理のスタイル、方法、組み合わせについて学ぶことができます。さまざまなレシピを閲覧して調理方法を学ぶだけでなく、オンラインで他のユーザーとコミュニケーションを取り、料理の経験を共有し、食べ物を通じて人生の美しさを感じることもできます。

1.2 テクノロジースタック

このプロジェクトの実装にはReact フレームワークが使用されます。使用されるテクノロジーは次のとおりです。

nodejsインターフェースデータをシミュレートします (プロキシ)

react react-dom

react-router-dom

redux react-redux redux-thunk immutable redux-immutable

styled-components ( css作用域) / sass / less / stylus

antd-mobile uiコンポーネント ライブラリ (モバイル端末)

react-transition-group

axios

http-proxy-middleware

構成デコレータ( costomize-cra react-app-rewired )など

1.3 開発環境

開発環境: Windows-

開発ツール: VSCode / webstorm + jsxプラグイン

開発およびデバッグツール: Chromeブラウザreact-devtools,redux-devtools

開発・運用環境: node環境

コード管理: git

オンライン環境: linux + nginx

1.4. プロジェクト効果の表示

1.5. プロジェクトの初期化

  • ローカルディスク上の指定された場所にReactプロジェクトを作成します。コマンドは次のとおりです。

npx create-react-app クックブック

  • プロジェクトを作成したら、プロジェクトディレクトリに入り、通常使用する3パーティパッケージをインストールします。コマンドは次のとおりです。

npm i -D カスタマイズ cra react-app-rewired http-proxy-middleware

npm i -S redux react-redux redux-thunk styled-components immutable redux-immutable react-router-dom react-transition-group axios

  • 作成したプロジェクト内の不要なファイルとフォルダをクリーンアップします

1. パブリックディレクトリの下にあるコンテンツの一部を削除します。

2. srcディレクトリの下にあるコンテンツの一部を削除します。

  • public/index.html を変更する
  • ルートコンポーネントApp.jsxとプロジェクトエントリファイルindex.jsをsrcディレクトリに作成します。
  • デコレータサポートの設定

// このファイルは webpack の増分構成用です。これは nodejs で実行される commonjs です
const { 解決 } = require('path')
// このプロジェクトの webpack 構成の操作クラスを段階的に変更して追加します const { addDecoratorsLegacy, override } = require('customize-cra')
// webpack 設定をカスタマイズする const customize = () => config => {
  // コードを書くときにインポートパスを容易にするために、現在のプロジェクトに @ 文字列を追加します config.resolve.alias['@'] = resolve('src')
  設定を返す
}
// エクスポート module.exports = override(
  // デコレータのサポートを追加する addDecoratorsLegacy(),
  // カスタム Webpack 構成を追加する customize()
) 

  • package.jsonのスクリプトコマンドを次のように変更します。

  「スクリプト」: {
    "start": "BROWSER=NONE に設定 && react-app-rewired を開始",
    "ビルド": "react-app-rewired ビルド",
    "テスト": "react-scripts テスト",
    "eject": "react-scripts eject"
  }
  • リバースプロキシの設定

// create-react-app スクリプト ツールは、nodejs を実行するためのプロキシ設定専用のファイルを提供します // モジュール化では commonjs 仕様を使用します // create-react-app スクリプト ツールはこのエントリのみを提供しますが、プロキシ操作は完了しません // プロキシを実装するには、サードパーティ パッケージを手動でインストールする必要があります // npm i -D http-proxy-middleware
// このファイルを変更した後は、必ず => サービスを再起動してください const { createProxyMiddleware: proxy } = require('http-proxy-middleware');
// アプリオブジェクトはエクスプレスオブジェクトです module.exports = app => {
  アプリを使用する(
    '/api',
    プロキシ({
        ターゲット: 'https://api.iynn.cn/film',
        変更元:true、
  }))
}
 

プロジェクトはこのマシンで初期化されており、リモートリポジトリにgitリポジトリを作成する必要があります。このマシンでプロジェクトのgitリポジトリを初期化します。

リモートに送信した後、ローカルマシンでブランチを使い始めます。マスターで開発しないでください。覚えておいてください

2. ホームページ開発

2.1、antd-mobile コンポーネント ライブラリ

オンライン ドキュメント: Ant Design Mobile | モバイル デザイン仕様

antd-mobile は、Ant Financial と Koubei のワイヤレス ビジネスに役立つ、Ant Design のモバイル仕様の React 実装です。複数のプラットフォームをサポートし、豊富なコンポーネントを備え、さまざまなシナリオを完全にカバーでき、高度に構成可能な UI スタイルを備え、拡張性が高く、さまざまな製品スタイルに簡単に適応できます。

  • 使用する前にパッケージをインストールする必要があります

npm i -S antd-mobile

  • コンポーネントコードとスタイルをオンデマンドでロードするBabelプラグイン

// 必要に応じてツリーシェイキングをロードする

npm i -D babel-plugin-import

// config-overrides.js はデフォルトの構成を変更するために使用されます const { override, fixBabelImports } = require('customize-cra')
モジュール.エクスポート = オーバーライド(
   BabelImportsを修正('import', {
     ライブラリ名: 'antd-mobile',
     スタイル: 'css',
   })
)
  • 使用
React をインポートします。{ コンポーネント } から "react" をインポートします。
// `antd-mobile` のボタン コンポーネントをインポートします。import { Button } from "antd-mobile";
クラスAppはComponentを拡張します{
    与える() {
        戻る (
            <>
                <Button type="primary">私は普通のボタンです</Button>
            </>
        );
    }
}
デフォルトのアプリをエクスポートします。
  • スタイルリセット

モバイルサイトには、 rem / vwvhの2種類のスタイルがあります。

2.2. ボトムナビゲーションの実装

参照アドレス: https://mobile.ant.design/components/tab-bar-cn/

下部のナビゲーションでは、antd-mobile のタブ バー コンポーネントを使用して、この機能表示を完了できます。

ルート計画

2.3. レシピのトップナビゲーション

高さ: .4rem;
行の高さ: .4rem;
背景: #FF6C0C;
フォントサイズ: .18rem;
テキスト配置: 中央;
色:#fff;

2.4. カルーセル表示

参考: Ant Design Mobile | モバイル デザイン仕様

この機能はantd-mobileのカルーセルコンポーネントを使用できます

2.5. 模擬データ

モックデータ(偽造データ)とは、偽のデータを使用して背景データをシミュレートすることを意味します。

なぜ偽のデータを作成するのですか?バックエンドはインターフェースを開発し、インターフェースドキュメントをゆっくりと生成するため、リクエストデータを自分でシミュレートする必要があります。シミュレートされたデータ フィールド、形式などについては、バックエンド エンジニアとの通信が必要です。このように、シミュレートされたデータを通じてフロントエンドの作業タスクを継続的に完了することができます。バックエンドエンジニアがデータインターフェースを記述し、インターフェース情報を提供した後は、リクエストアドレスを変更するだけで、フロントエンドとバックエンドがシームレスに接続されます。

  • json-serverをインストールして、Webサービスをすぐに開始できるようにします。

npm i -g json-server === yarn グローバル json-server を追加します
//json-server のデフォルト ルーティング モード // get / post / put / delete をサポートし、ファイルの書き込みもサポートします。クロスドメインです // data.json
// http リクエストアドレス http://xxx/data
{
  "データ": {
    "id": 1,
    "名前": "aaa",
    「年齢」: 20
  }
}
json-server データ.json
  • 模擬データ

2.6. 検索コンポーネント

エクスポート const SearchBox = styled.div`
  幅:90vw;
  高さ: .46rem;
  ディスプレイ: フレックス;
  境界線: 1px 実線 #ff6c0c;
  マージン: .15rem 自動;
  境界線の半径: 5px;
  ボックスの影: 1px 1px 5px #ccc;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  画像{
    幅: .2rem;
    高さ: .2rem;
  }
  スパン{
    色:#555;
    左マージン: .1rem;
  }
`

2.7. 人気のカテゴリー

エクスポート const HotCateBox = styled.div`
  背景: #fff;
  。タイトル{
    パディング: .15rem;
    色:#949494;
  }
`
<グリッドデータ={hotcate}
              列番号={3}
              アイテムスタイル={{ 高さ: '.5rem' }}
              onClick={(行, インデックス) => {
                console.log(インデックス、this.props.history.push)
              }}
              レンダリングアイテム={データアイテム => (
                <div>{データ項目.タイトル}</div>
              )}
            />

2.8. おいしい食べ物

静的レイアウト表示

  • html
<div>
	<h1>素晴らしい食事</h1>
	<div>
		<ダウンロード>
			<dt>
				<img src="http://www.mobiletrain.org/images/index/new_logo.png" />
			</dt>
			<dd>
				<h3>ピーマンの干し豆腐</h3>
				<p>1000 回閲覧、2000 件のお気に入り</p>
			</dd>
		</dl>
	</div>
</div>
  • CS
div {
	左パディング: .1rem;
	>h1 {
		高さ: .5rem;
		行の高さ: .6rem;
		左パディング: .15rem;
		色: #666;
		左パディング: 0;
	}
	>div {
		ディスプレイ: フレックス;
		flex-wrap: ラップ;
		>ダウンロード{
			幅: calc(50% - 0.1rem);
			背景: #fff;
			右マージン: .1rem;
			マージン下部: .1rem;
			dt {
				画像 {
					幅: 100%;
				}
			}
			dd {
				ディスプレイ: フレックス;
				flex-direction: 列;
				アイテムの位置を中央揃えにします。
				パディング: .1rem;
				h3 {
					フォントサイズ: .16rem;
				}
				p {
					フォントサイズ: .12rem;
					色: #666;
				}
			}
		}
	}

3. 分類の開発

3.1. カテゴリトップスイッチ

必要なコンポーネントとスタイルを作成する

  • html
<ul>
	<li>カテゴリー</li>
	<li className="active">材料</li>
	<li className="スライダー右"></li>
</ul>
  • CS
高さ:.44rem;
背景:#ee742f;
ディスプレイ:フレックス;
アイテムを中央揃えにします。
コンテンツを中央揃えにする。
ul {
	幅:1.4rem;
	高さ: .3rem;
	ディスプレイ: フレックス;
	位置: 相対的;
	境界線: 1px 実線 #fff;
	zインデックス: 0;
	境界線の半径: .15rem;
	li {
		フレックス: 1;
		行の高さ: .3rem;
		テキスト配置: 中央;
		色: #fff;
		&:最後の子 {
			位置: 絶対;
			幅: 50%;
			高さ: .3rem;
			背景: #fff;
			Zインデックス: -1;
			境界線の半径: .15rem;
			変換: translate(0, 0);
			遷移: すべて 0.4 秒のイーズイン。
			&。右 {
				変換: translate(100%, 0);
			}
		}
		&。アクティブ {
			色: #ee742f;
		}
	}

3.2 リスト表示

  • html
<div>
	<div>
		<ul>
			<li class="active"><span>カテゴリ</span></li>
		</ul>
	</div>
	<div>
		<ul>
			<li>目次</li>
		</ul>
	</div>
</div>
  • CS
.div {
	高さ: 100%;
	ディスプレイ: フレックス;
	>div:最初の子{
		幅: .9rem;
		>ul {
			高さ: 100%;
			overflow-y: スクロール;
			li {
				高さ: .5rem;
				テキスト配置: 中央;
				行の高さ: .5rem;
				背景: #f3f3f3;
				&。アクティブ {
					背景: #fff;
					スパン {
						表示: インラインブロック;
						高さ: 100%;
						下境界線: 1px 実線 #ee742f;
					}
				}
			}
		}
	}
	>div:最後の子{
		フレックス: 1;
		背景: #fff;
		パディング: .2rem .1rem;
		>ul {
			ディスプレイ: フレックス;
			flex-wrap: ラップ;
			overflow-y: スクロール;
			高さ: 100%;
			align-content: flex-start;
			li {
				幅: 33.3333%;
				テキスト配置: 中央;
				高さ: .5rem;
				行の高さ: .5rem;
				色: #666;
			}
		}
	}

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • react および antd コンポーネントによって実装された管理システムのサンプルコード
  • Reactを使用してバックエンド管理システムを構築する詳細な説明
  • Reactのルーティングシステムについて簡単に説明します
  • JavaFX ツールを使用したリアクティブ システムの構築

<<:  NavicatでMySqlスケジュールタスクを作成する方法の詳細な説明

>>:  Docker 環境での Jmeter の分散操作に関する詳細なチュートリアル

推薦する

vue3 でブロック崩しゲームを開発する方法をステップバイステップで教えます

序文vue3 を使った例をいくつか書いてみましたが、Vue3 のコンポジション API はよく設計さ...

Vue3でアイコンを使用する2つの例

目次1. SVGを使用する2. fontAwesomeを使用する3 ソース4 結論テクノロジースタッ...

VMware ESXi のインストールと使用記録(ダウンロード付き)

目次1. ESXiをインストールする2. ESXiをセットアップする3. ESXiを起動するESXi...

JavaScript のショートカットのヒント

目次1. 配列を結合する2. 配列をマージする(最初に) 3. 配列の複製4. 構造化分解割り当て5...

ネイティブ JavaScript を使用した Web 計算機の実装

この記事では、参考までに、計算機のWebバージョンを実装するためのJavaScriptの具体的なコー...

Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...

Ubuntu 向け VMware Tools のインストールと構成のチュートリアル

以前、ブロガーは VMware 仮想マシンに Ubuntu システムをインストールしました。まだイン...

WeChatアプレットがジグソーパズルゲームを実装

この記事では、WeChatアプレットでジグソーパズルゲームを実装するための具体的なコードを参考までに...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...

MySQL インデックスに関するヒントのまとめ

目次1. インデックスの基礎知識1.1 インデックスの利点1.2 インデックスの有用性1.3 インデ...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

MySQLデータベース操作の基本コマンド

1. データベースを作成します。 データ data _name を作成します。 PHP でデータベー...

Nginx サーバーの https 設定方法の例

Linux: Linux バージョン 3.10.0-123.9.3.el7.x86_64 ngin...

LinuxベースのApacheウェブサイトサービス構成の詳細な説明

オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...

MySQLのクラスタモードでのgalera-clusterのデプロイメントの詳細説明

目次1: galera-clusterの紹介2. galera-clusterの仕組み3: Mari...