Modularization of style, componentization coding process of functional interface

Style Modularity

Since the styles will eventually be collected in one folder, if the styles in the css files of different components have the same name, there will be style conflicts. In order to avoid conflicts, we can use the modularization of styles.

• Add the module keyword to the css file name, eg:index.css => index.module.css
• When importing a style, you can name it (such as hello), and when using the style in the style sheet, you only need hello.style name.

eg：
Hello.module.css

.title{
    
    
    background-color: orange;
}

index.jsx in the same directory

import React,{
    
    Component} from "react"
import hello from './Hello.module.css'

export default class Hello extends Component{
    
    
    render(){
    
    
        return <h2 className={
    
    hello.title}>Hello,React</h2>
    }
}

A useful plug-in for react

Shortcut key guide: https://github.com/chillios-ts/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

Componentized coding process of functional interface

1. Split components
   Split interface, extract components
2. Implement static components
   Use components to achieve static page effects
3. Implement dynamic components

• Dynamically display initialization data: data type, data name
• Interaction (starting from binding event listener)

summary

1. Split components, implement static components, note: className, style writing

2. Dynamic initialization list, how to determine which component's state to put data in?

   • A component uses: in its own state
   • Some components use: placed in their common parent component state (officially called this operation: state promotion)

3. About communication between father and son:

   • [Parent Component] Pass data to [Child Component]: pass through props
   • [Sub Component] Pass data to [Parent Component]: pass it through props, requiring the parent to pass a function to the child in advance

4. Pay attention to the difference between defaultchecked and checked. There are similar ones: defaultValue and value5. Where is the state, where is the method of operating the
   state
   .