如何使用React實(shí)現菜譜系統

這篇文章主要介紹如何使用React實(shí)現菜譜系統，文中介紹的非常詳細，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一、菜譜大全

1.1、項目背景

當下回家吃飯健康飲食的理念正在興起。據調查顯示，有超過(guò)九成的都市白領(lǐng)及年輕人其實(shí)都傾向于在家里吃飯，尤其是有小孩的家庭意愿會(huì )更加強烈， 因為他們普遍都認為在家里吃飯的幸福感會(huì )更高； 隨著(zhù)經(jīng)濟的快速發(fā)展，人們的生活水平的逐漸提高，對飲食質(zhì)量要求也越來(lái)越高，但都市快節奏的生活讓上班族們吃飯的目標性更小，通常只是到了時(shí)間隨機選擇食物塞飽肚子。該美食網(wǎng)站倡導一種全新的健康的生活方式，用戶(hù)可以根據網(wǎng)站上提供的食譜了解不同菜系的風(fēng)格、做法及搭配，除了可以查看各種食譜學(xué)習做飯， 還可以在線(xiàn)與其他用戶(hù)一起交流和分享做菜的心得，通過(guò)美食來(lái)感受生活之美。

1.2、技術(shù)棧

使用 React 框架來(lái)完成本次項目的實(shí)現，使用技術(shù)有如下一些：

nodejs 進(jìn)行 模擬接口數據 ( 代理 )

react react-dom

react-router-dom

redux react-redux redux-thunk immutable redux-immutable

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

antd-mobile ui 組件庫 ( 移動(dòng)端 )

react-transition-group

axios

http-proxy-middleware

配置裝飾器 ( costomize-cra react-app-rewired ) 等等

1.3、開(kāi)發(fā)環(huán)境

開(kāi)發(fā)環(huán)境為：Windows-

開(kāi)發(fā)工具：VSCode / webstorm + jsx 插件

開(kāi)發(fā)調試工具：Chrome 瀏覽器 react-devtools，redux-devtools

開(kāi)發(fā)運行環(huán)境：node 環(huán)境

代碼管理：git

上線(xiàn)環(huán)境：linux + nginx

1.4、項目效果展示

1.5、項目初始化

• 在本機磁盤(pán)中指定位置創(chuàng )建一下 react 項目，命令如下

npx create-react-app cookbook

• 創(chuàng )建好項目后，進(jìn)入項目目錄先安裝常規要使用的三方包，命令如下

npm i -D customize-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

• 清理創(chuàng )建好的項目中不需要的文件及文件夾

1.刪除 public 目錄下的部份內容

2.刪除 src 目錄下的部份內容

• 修改 public / index.html

• 在 src 目錄下創(chuàng )建 根組件 App.jsx 與項目 入口文件 index.js

• 配置 裝飾器 支持

// 此文件就是對于 webpack 進(jìn)行增量配置  它是運行在 nodejs 中的 commonjs
const { resolve } = require('path')
// 增量對于本項目中的 webpack 配置進(jìn)行修改 和 添加操作類(lèi)
const { addDecoratorsLegacy, override } = require('customize-cra')
// 自定義 webpack 配置
const customize = () => config => {
  // 給當前項目添加一個(gè) @ 字符串，來(lái)方便寫(xiě)代碼時(shí)的導入路徑
  config.resolve.alias['@'] = resolve('src')
  return config
}
// 導出
module.exports = override(
  // 添加裝飾器支持
  addDecoratorsLegacy(),
  // 添加自定義 webpack 配置
  customize()
)

• 修改package.json中的腳本命令為如下

  "scripts": {
    "start": "set BROWSER=NONE && react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

• 配置 反向代理

// create-react-app 腳本架工具提供一個(gè)專(zhuān)門(mén)用來(lái)進(jìn)行代理配置的文件，它是給 nodejs 運行
// 模塊化使用 commonjs 規范
// create-react-app 腳本架工具只提供了這個(gè)入口，但是代理操作沒(méi)有幫你完成
// 需要手動(dòng)去安裝第 3 方包來(lái)實(shí)現 代理
// npm i -D http-proxy-middleware
// 修改此文件后，一定要 => 重啟服務(wù)
const { createProxyMiddleware: proxy } = require('http-proxy-middleware');
// app 對象就是 express 對象
module.exports = app => {
  app.use(
    '/api',
    proxy({
        target:'https://api.iynn.cn/film',
        changeOrigin:true,
  }))
}

項目已在本機中 初始化 完成，需要在 遠程 倉庫中創(chuàng )建 git 倉庫本機把項目初始化一個(gè) git 倉庫

提交到遠程后，在本機開(kāi)始用 分支 來(lái)進(jìn)行，不要在 master 中進(jìn)行開(kāi)發(fā)，切記

二、首頁(yè)開(kāi)發(fā)

2.1、antd-mobile 組件庫

在線(xiàn)文檔：Ant Design Mobile | A Mobile Design Specification

antd-mobile 是 Ant Design 的移動(dòng)規范的 React 實(shí)現，服務(wù)于 螞蟻金服 及 口碑無(wú)線(xiàn) 業(yè)務(wù)。它支持多平臺，組件豐富、能全面覆蓋各類(lèi)場(chǎng)景，UI 樣式高度可配置，拓展性更強，輕松適應各類(lèi)產(chǎn)品風(fēng)格。

• 在使用前需要先對包進(jìn)行安裝

npm i -S antd-mobile

• 按需加載 組件代碼 和 樣式的 babel 插件

// 按需加載 tree-shaking

npm i -D babel-plugin-import

//  config-overrides.js  用于 修改默認配置
const { override, fixBabelImports } = require('customize-cra')
module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd-mobile',
     style: 'css',
   })
)

• 使用

import React, { Component } from "react";
// 引入 `antd-mobile` 的 按鈕組件
import { Button } from "antd-mobile";
class App extends Component {
    render() {
        return (
            <>
                <Button type="primary">我是一個(gè)常規按鈕</Button>
            </>
        );
    }
}
export default App;

• 樣式重置

移動(dòng)站點(diǎn)中的樣式，單位有兩種 rem / vw、vh

2.2、底部導航實(shí)現

參考地址：https://mobile.ant.design/components/tab-bar-cn/

底部導航 可以使用 antd-mobile 中的 tab-bar 組件完成此功能展示。

路由規劃

2.3、菜譜大全頂部導航

height: .4rem;
line-height: .4rem;
background: #FF6C0C;
font-size: .18rem;
text-align: center;
color:#fff;

2.4、輪播顯示

參考地址：Ant Design Mobile | A Mobile Design Specification

該功能可以使用 antd-mobile 中的 Carousel 組件

2.5、mock 數據

mock數據（ faker數據 ），即使用假數據來(lái)模擬后臺的數據。

為什么要做假數據？因為后端開(kāi)發(fā)接口并產(chǎn)出接口文檔沒(méi)有那么快，此時(shí)就需要我們自己來(lái)模擬請求數據。模擬的數據字段、格式等，需要和后端工程師溝通。這樣，我們可以先通過(guò)模擬的數據繼續完成前端的工作任務(wù)，待后端工程師寫(xiě)好數據接口并提供了接口信息后，我們只需要修改請求地址，前后端就實(shí)現了無(wú)縫銜接。

• 安裝 json-server 幫助我們快速啟動(dòng)一個(gè) web 服務(wù)

npm i -g json-server  ===   yarn add global json-server
// json-server 默認的路由模式
// 支持 get / post / put / delete 而且還支持文件寫(xiě)入  它是跨域的
// data.json
// http 請求地址  http://xxx/data
{
  "data": {
    "id": 1,
    "name": "aaa",
    "age": 20
  }
}
json-server data.json

• mock數據

2.6、搜索組件

export const SearchBox = styled.div`
  width: 90vw;
  height: .46rem;
  display: flex;
  border: 1px solid #ff6c0c;
  margin: .15rem auto;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #ccc;
  justify-content: center;
  align-items: center;
  img{
    width: .2rem;
    height: .2rem;
  }
  span{
    color:#555;
    margin-left: .1rem;
  }
`

2.7、熱門(mén)分類(lèi)

export const HotCateBox = styled.div`
  background: #fff;
  .title{
    padding: .15rem;
    color:#949494;
  }
`
<Grid data={hotcate}
              columnNum={3}
              itemStyle={{ height: '.5rem' }}
              onClick={(row, index) => {
                console.log(index, this.props.history.push)
              }}
              renderItem={dataItem => (
                <div>{dataItem.title}</div>
              )}
            />

2.8、精品好菜

靜態(tài)布局展示

• HTML

<div>
	<h2>精品好菜</h2>
	<div>
		<dl>
			<dt>
				<img src="http://www.mobiletrain.org/images/index/new_logo.png" />
			</dt>
			<dd>
				<h4>青椒香干</h4>
				<p>1000瀏覽 2000收藏</p>
			</dd>
		</dl>
	</div>
</div>

• css

div {
	padding-left: .1rem;
	>h2 {
		height: .5rem;
		line-height: .6rem;
		padding-left: .15rem;
		color: #666;
		padding-left: 0;
	}
	>div {
		display: flex;
		flex-wrap: wrap;
		>dl {
			width: calc(50% - 0.1rem);
			background: #fff;
			margin-right: .1rem;
			margin-bottom: .1rem;
			dt {
				img {
					width: 100%;
				}
			}
			dd {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: .1rem;
				h4 {
					font-size: .16rem;
				}
				p {
					font-size: .12rem;
					color: #666;
				}
			}
		}
	}

三、分類(lèi)開(kāi)發(fā)

3.1、分類(lèi)頂部切換

創(chuàng )建需要的組件 和 樣式

• HTML

<ul>
	<li>分類(lèi)</li>
	<li className="active">食材</li>
	<li className="slider right"></li>
</ul>

• CSS

height:.44rem;
background:#ee742f;
display:flex;
align-items:center;
justify-content:center;
ul {
	width: 1.4rem;
	height: .3rem;
	display: flex;
	position: relative;
	border: 1px solid #fff;
	z-index: 0;
	border-radius: .15rem;
	li {
		flex: 1;
		line-height: .3rem;
		text-align: center;
		color: #fff;
		&:last-child {
			position: absolute;
			width: 50%;
			height: .3rem;
			background: #fff;
			z-index: -1;
			border-radius: .15rem;
			transform: translate(0, 0);
			transition: all 0.4s ease-in;
			&.right {
				transform: translate(100%, 0);
			}
		}
		&.active {
			color: #ee742f;
		}
	}

3.2、列表展示

• HTML

<div>
	<div>
		<ul>
			<li class="active"><span>分類(lèi)</span></li>
		</ul>
	</div>
	<div>
		<ul>
			<li>內容</li>
		</ul>
	</div>
</div>

• CSS

.div {
	height: 100%;
	display: flex;
	>div:first-child {
		width: .9rem;
		>ul {
			height: 100%;
			overflow-y: scroll;
			li {
				height: .5rem;
				text-align: center;
				line-height: .5rem;
				background: #f3f3f3;
				&.active {
					background: #fff;
					span {
						display: inline-block;
						height: 100%;
						border-bottom: 1px solid #ee742f;
					}
				}
			}
		}
	}
	>div:last-child {
		flex: 1;
		background: #fff;
		padding: .2rem .1rem;
		>ul {
			display: flex;
			flex-wrap: wrap;
			overflow-y: scroll;
			height: 100%;
			align-content: flex-start;
			li {
				width: 33.3333%;
				text-align: center;
				height: .5rem;
				line-height: .5rem;
				color: #666;
			}
		}
	}