一篇文章教你用React实现菜谱系统React

使用React框架来完成本次项目的实现，使用技术有如下一些：

nodejs进行模拟接口数据(代理)

reactreact-dom

react-router-dom

reduxreact-reduxredux-thunkimmutableredux-immutable

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

antd-mobileui组件库(移动端)

react-transition-group

axios

配置装饰器(costomize-crareact-app-rewired)等等

开发环境为：Windows-

开发工具：VSCode/webstorm+jsx插件

开发调试工具：Chrome浏览器react-devtools，redux-devtools

开发运行环境：node环境

代码管理：git

上线环境：linux+nginx

npxcreate-react-appcookbook

npmi-Sreduxreact-reduxredux-thunkstyled-componentsimmutableredux-immutablereact-router-domreact-transition-groupaxios

1.删除public目录下的部份内容

2.删除src目录下的部份内容

//此文件就是对于webpack进行增量配置它是运行在nodejs中的commonjsconst{resolve}=require('path')//增量对于本项目中的webpack配置进行修改和添加操作类const{addDecoratorsLegacy,override}=require('customize-cra')//自定义webpack配置constcustomize=()=>config=>{//给当前项目添加一个@字符串，来方便写代码时的导入路径config.resolve.alias['@']=resolve('src')returnconfig}//导出module.exports=override(//添加装饰器支持addDecoratorsLegacy(),//添加自定义webpack配置customize())

"scripts":{"start":"setBROWSER=NONE&&react-app-rewiredstart","build":"react-app-rewiredbuild","test":"react-scriptstest","eject":"react-scriptseject"}

提交到远程后，在本机开始用分支来进行，不要在master中进行开发，切记

antd-mobile是AntDesign的移动规范的React实现，服务于蚂蚁金服及口碑无线业务。它支持多平台，组件丰富、能全面覆盖各类场景，UI样式高度可配置，拓展性更强，轻松适应各类产品风格。

npmi-Santd-mobile

//按需加载tree-shaking

npmi-Dbabel-plugin-import

//config-overrides.js用于修改默认配置const{override,fixBabelImports}=require('customize-cra')module.exports=override(fixBabelImports('import',{libraryName:'antd-mobile',style:'css',}))importReact,{Component}from"react";//引入`antd-mobile`的按钮组件import{Button}from"antd-mobile";classAppextendsComponent{render(){return(<>我是一个常规按钮);}}exportdefaultApp;移动站点中的样式，单位有两种rem/vw、vh

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

路由规划

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

该功能可以使用antd-mobile中的Carousel组件

mock数据（faker数据），即使用假数据来模拟后台的数据。

为什么要做假数据？因为后端开发接口并产出接口文档没有那么快，此时就需要我们自己来模拟请求数据。模拟的数据字段、格式等，需要和后端工程师沟通。这样，我们可以先通过模拟的数据继续完成前端的工作任务，待后端工程师写好数据接口并提供了接口信息后，我们只需要修改请求地址，前后端就实现了无缝衔接。

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

exportconstHotCateBox=styled.div`background:#fff;.title{padding:.15rem;color:#949494;}`{console.log(index,this.props.history.push)}}renderItem={dataItem=>(

)}/>

静态布局展示

创建需要的组件和样式

• 分类
食材

height:.44rem;background:#ee742f;display:flex;align-items:center;justify-content:center;ul{width:1.4rem;height:.3rem;display:flex;position:relative;border:1pxsolid#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:all0.4sease-in;&.right{transform:translate(100%,0);}}&.active{color:#ee742f;}}

.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:1pxsolid#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;}}}