React project combat --- React + Redux + Ant Design +TypeScript

Lagou e-commerce project description

1. Technology Stack

1.1 Client

  • Script: TypeScript
  • Front-end framework: React
  • Routing management: React-router-dom
  • User interface: Antd
  • Global state management: Redux
  • Asynchronous status update: redux-saga
  • Routing status synchronization: connected-react-router
  • Network request: Axios
  • Debugging tool: redux-devtools-extension

1.2 Server

  • Script: Node.js
  • Database: Mongodb
  • Database visualization: Robo 3T

2. Set up a development environment (server)

2.1 Install mongodb database (Mac)

Install homebrew

Homebrew is a package manager in mac system

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Add mongodb repository source

brew tap mongodb/brew

Install mongodb

Before installation, make sure that the system has installed the xcode command line compilation development tool

xcode-select --install 
brew install mongodb-community

Start mongodb

brew services run mongodb-community

Stop mongodb

brew services stop mongodb-community

File location

  1. Database configuration file: /usr/local/etc/mongod.conf
  2. The default storage location of the database file: /usr/local/var/mongodb
  3. Log storage location: /usr/local/var/log/mongodb/mongo.log

2.2 Install mongodb database (Windows)

Insert picture description here


Insert picture description here


Insert picture description here


Insert picture description here


Insert picture description here


Insert picture description here


Insert picture description here


Insert picture description here


Insert picture description here


Insert picture description here


Insert picture description here


Insert picture description here

2.3 Database visualization Robo 3T

download link

2.4 Start the server-side application

  1. Mac users drag the server-side application folder to the terminal, windows users open the server-side application folder, hold down shift while clicking the right mouse button, and choose to open the command line tool (cmd or powershell) here
  2. Execute npm installcommand to install the program dependent files
  3. Execute npm startthe command to start the server-side application, the default application server listens on port 80

3. Set up a development environment (client)

3.1 Create a project and install dependencies

Use create-react-app scaffolding to create a react project

npx create-react-app ecommerce-front --template typescript

Install project dependencies

npm install antd axios moment redux react-redux react-router-dom redux-saga connected-react-router redux-devtools-extension @types/react-redux @types/react-router-dom

antd CSS uses CDN

https://cdn.bootcdn.net/ajax/libs/antd/4.8.3/antd.min.css

3.2 Configure server-side API request address

Create a new .env file in the root directory of the project and add the following content to the file:

REACT_APP_PRODUCTION_API_URL=http://fullstack.net.cn/api
REACT_APP_DEVLOPMENT_API_URL=http://localhost/api

The create-react-app scaffolding has built-in dotenv, allowing us to configure environment variables in the React project, but the name of the environment variable must start with REACT_APP_.

REACT_APP_PRODUCTION_API_URL: Server-side API address of the production environment

REACT_APP_DEVLOPMENT_API_URL: server-side API address of the development environment

Can project through the process.env.REACT_APP_DEVLOPMENT_API_URLconduct of the visit, but I would have drawbacks, one of which is too long to write code that is not convenient, the second is if you write the code in the environment died when switching environment is not easy to change up.

The solution is to write the API address into the configuration and decide which API address to use according to the environment

export let API: string

if (process.env.NODE_ENV === "development") {
  API = process.env.REACT_APP_DEVLOPMENT_API_URL!
} else {
  API = process.env.REACT_APP_PRODUCTION_API_URL!
}

3.3 Install chrome extension

Insert picture description here


React Developer Tools: Check the React component hierarchy and display React components on the page.

Insert picture description here


Redux DevTools: monitor changes in the state of the Store

Insert picture description here
import { composeWithDevTools } from "redux-devtools-extension"

export const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(...middlewares))
)