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 の分散操作に関する詳細なチュートリアル

推薦する

HTML の 5 種類のスペースの意味

HTML には、幅の異なる 5 つのスペース エンティティが用意されています。非改行スペース ( )...

シンプルなカルーセル効果を実現するネイティブ js

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...

アイデアを使用して Springboot 初期化サーバーを構築する際の問題分析

問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...

フォアマン Ubuntu16 クイックインストール

クイックスタートガイドForeman インストーラーは、完全に機能する Foreman セットアップ...

Dockerは終了状態で起動します

docker run後、ステータスは常にExitedになります解決:パラメータを追加: -it do...

MySQLクエリが遅い理由

目次1. 遅いところはどこですか? 2. 不要なデータをクエリしましたか? 1. 不要なレコードをク...

WiFi 開発 | WiFi ワイヤレス テクノロジーの紹介

目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...

ストリーマーボタンの効果を実現するCSS3アニメーション

CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...

nginx リバース プロキシでの proxy_pass の実装

フォーマットはシンプルです: proxy_pass URL; URL には、送信プロトコル (htt...

Linux に nodejs 環境とパス構成をインストールするための詳細な手順

Linux に Node.js をインストールする方法は 2 つあります。1 つは簡単で、解凍して使...

Vue3+Vite+TS は、要素プラスビジネスコンポーネントの二次カプセル化を実装します sfasga

目次1. 構造文字列2. タプルを返す3. Dict辞書にアクセスする4. 図書館を利用する5. リ...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

CSS3 のフレックスレイアウト幅の無効性の解決策

2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。 しかし...

モバイルページで縦画面を強制する方法

最近、仕事でモバイルページを作成しました。もともと特別なことではありませんでしたが、非常に奇妙に感じ...