React tools

1. Use the prettier plug-in 

Target:

Learn how to configure the vscode plugin for code formatting

content:

• The prettier plug-in is a code formatting plug-in that can format react code

• Install plugin

• Add prettier configuration  

// 保存的时候用使用prettier进行格式化
"editor.formatOnSave": true,
// 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",

// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,

Summarize:

• Configuring the prettier plug-in can improve the efficiency of react development

2. Installation of react plug-in

Target:

• Install the Chrome browser plug-inreact-devtools

content:

• After installation, it will only appear on websites using React

3. vscode configuration auto-completion

Target:

Configure vscode and use the tab key in vscode to quickly generate HTML content

content:

There is no need to install additional plug-ins, just add the following settings directly in the settings.

Core code:

// 在 js 文件中启用 emmet 语法 
"emmet.includeLanguages": {
  "javascript": "javascriptreact"
},
// 按tab键展开 emmet 语法
"emmet.triggerExpansionOnTab": true,

4. redux-devtools-extension middleware

Goal : Be able to use chrome developer tools to debug and track redux status

Content :

• redux-devtools-exension documentation

• First install the redux developer tools on the Chrome browser, and then you can check the Redux status

Steps :

1. Install:yarn add redux-devtools-extension

2. Import the composeWithDevTools function from this middleware

3. Call this function, passing applyMiddleware() as a parameter

4. Open the redux developer tools of Chrome browser and use

import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

export default store