Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use React to achieve the recipe system, the article is very detailed, has a certain reference value, interested friends must read it!

1. Recipes 1.1, project background

Now the idea of going home for dinner and eating healthily is on the rise. According to the survey, more than 90% of urban white-collar workers and young people actually prefer to eat at home, especially families with children, because they generally think that eating at home will be happier. With the rapid development of economy and the gradual improvement of people's living standards, the demand for the quality of diet is getting higher and higher, but the fast-paced urban life makes office workers have less goal to eat, usually only when it is time to randomly choose food to fill their stomachs. The food website advocates a new and healthy lifestyle, where users can learn about the styles, practices and collocation of different cuisines according to the recipes provided on the site, in addition to viewing various recipes and learning to cook. you can also communicate and share cooking experiences with other users online, and feel the beauty of life through good food.

1.2. Technology stack

Using the React framework to complete the implementation of this project, the following technologies are used:

Nodejs simulates interface data (proxy)

React react-dom

React-router-dom

Redux react-redux redux-thunk immutable redux-immutable

Styled-components (css scope) / sass / less / stylus

Antd-mobile ui component Library (Mobile)

React-transition-group

Axios

Http-proxy-middleware

Configure the decorator (costomize-cra react-app-rewired), etc.

1.3. Development environment

The development environment is: Windows-

Development tools: VSCode / webstorm + jsx plug-in

Development and debugging tool: Chrome browser react-devtools,redux-devtools

Development and running environment: node environment

Code management: git

Launch environment: linux + nginx

1.4. Demonstration of project effect

1.5. Project initialization

Create a react project at a specified location on the local disk with the following command

Npx create-react-app cookbook

After you have created the project, go to the project directory and install the tripartite package that you normally want to use, as follows

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

Clean up unwanted files and folders in the created project

1. Delete some contents of the public directory

two。 Delete some contents of the src directory

Modify public / index.html

Create the root component App.jsx and the project entry file index.js under the src directory

Configure decorator support

/ / this file is for incremental configuration of webpack. It is commonjsconst {resolve} = require ('path') / / incremental running in nodejs to modify and add webpack configuration in this project. Const {addDecoratorsLegacy, override} = require (' customize-cra') / / Custom webpack configuration const customize = () = > config = > {/ / add an @ string to the current project To facilitate the import path config.resolve.alias ['@'] = resolve ('src') return config} / / export module.exports = override when writing code (/ / add decorator support addDecoratorsLegacy (), / / add custom webpack configuration customize ())

Modify the script command in package.json to the following

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

Configure reverse proxy

/ / the create-react-app script shelf tool provides a special file for agent configuration, which only provides this entry for nodejs to run / / modularize using the commonjs specification / / create-react-app script shelf tool, but the agent operation does not help you / / you need to manually install the 3rd party package to implement the agent / / npm I-D http-proxy-middleware// after modifying this file Be sure to = > restart the service const {createProxyMiddleware: proxy} = require ('http-proxy-middleware') / / the app object is the express object module.exports = app = > {app.use ('/ api', proxy ({target:' https://api.iynn.cn/film', changeOrigin:true,}))}

The project has been initialized on the local machine. You need to create a git warehouse in the remote warehouse to initialize the project to a git warehouse locally.

After submitting to the remote, start to use the branch on the local machine, do not develop in master, remember

Second, home development 2.1, antd-mobile component library

Online documentation: Ant Design Mobile | A Mobile Design Specification

Antd-mobile is the React implementation of Ant Design's mobile specification, serving Ant Financial Services Group and word-of-mouth wireless business. It supports multiple platforms, rich components, can fully cover all kinds of scenarios, UI style is highly configurable, more expandable, and easily adapt to all kinds of product styles.

The package needs to be installed before use.

Npm I-S antd-mobile

Babel plug-ins that load component codes and styles on demand

/ / load tree-shaking on demand

Npm I-D babel-plugin-import

/ / config-overrides.js is used to modify the default configuration const {override, fixBabelImports} = require ('customize-cra') module.exports = override (fixBabelImports (' import', {libraryName: 'antd-mobile', style:' css',}))

Use

Import React, {Component} from "react"; / / introduce the button component of `antd- mobile` import {Button} from "antd-mobile"; class App extends Component {render () {return (I am a regular button);} export default App

Style reset

Styles in mobile sites, there are two types of rem / vw, vh

2.2, bottom navigation implementation

Reference address: https://mobile.ant.design/components/tab-bar-cn/

The bottom navigation can be demonstrated using the tab-bar component in antd-mobile.

Route planning

2.3.The menu top navigation height: .4rem; line-height: .4rem; background: # FF6C0C;font-size: .18rem; text-align: center;color:#fff;2.4, rotation display

Reference address: Ant Design Mobile | A Mobile Design Specification

This feature can use the Carousel component in antd-mobile

2.5, mock data

Mock data (faker data), even if the fake data is used to simulate the background data.

Why fake data? Because it is not so fast for the back end to develop the interface and produce the interface document, we need to simulate the request data ourselves. Simulated data fields, formats, etc., need to communicate with back-end engineers. In this way, we can continue to complete the front-end task through the simulated data, and after the back-end engineer writes the data interface and provides the interface information, we only need to modify the request address, and the front and back ends connect seamlessly.

Installing json-server helps us start a web service quickly

Npm I-g json-server = = yarn add global json-server// json-server default route pattern / / supports get / post / put / delete and also supports file writing it is cross-domain / / data.json// http request address http://xxx/data{ "data": {"id": 1, "name": "aaa", "age": 20}} json-server data.json

Mock data

Search component 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, export const HotCateBox = styled.div` background: # fff; .title {padding: .15rem; color:#949494;} `{console.log (index, this.props.history.push)}} renderItem= {dataItem = > ({dataItem.title})} / > 2.8.Fine dishes

Static layout display

HTML

Fine and good food

Dried green pepper

1000 browse 2000 favorites

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 Third, classification development 3.1, switching at the top of classification

Create the required components and styles

HTML

Classified food materials

CSS

Height:.44rem;background:#ee742f;display:flex;align-items:center;justify-content:center;ul {width: 1.4remm; 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, list display

HTML

Classified content

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 } these are all the contents of the article "how to use React to implement a recipe system". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.