CSS + comment component in react react

Time:2020-2-16

A small case to consolidate the use of stateful and stateless components

Generating multiple components through a for loop

  1. Data:
CommentList = [
    {user: 'Zhang San', content: 'ha ha, sofa'},
    {user: 'Zhang san2', content: 'ha ha, bench'},
    {user: 'Zhang SAN3', content: 'ha ha, mat'},
    {user: 'Zhang San 4', content: 'ha ha, brick'},
    {user: 'Zhang San 5', content: 'ha ha, cannon downstairs'}
]

Entrance

//JS package entry file
//1. Import react package
import React from 'react'
import ReactDOM from 'react-dom'

//Import comment list style [Note: this style is global]
// import './css/commentList.css'

//Import comment list component
import CommentList from './components/comment1/CommentList.jsx'

ReactDOM.render(
  
, document.getElementById('app'))

Comment list component

import React from 'react'

//Import the required subcomponents of the current component
import CommentItem from './CommentItem.jsx'

//Comment list component
export default class CommentList extends React.Component {
  constructor(props) {
    super(props)

    //Define private data for the current comment list component
    this.state = {
      cmts: [
        {user: 'Zhang San', content: 'ha ha, sofa'},
        {user: 'Zhang san2', content: 'ha ha, bench'},
        {user: 'Zhang SAN3', content: 'ha ha, mat'},
        {user: 'Zhang San 4', content: 'ha ha, brick'},
        {user: 'Zhang San 5', content: 'ha ha, cannon downstairs'}
      ]
    }
  }

  //In stateful components, the render function is necessary to represent, render and show which virtual DOM elements
  render() {
    //#Region loop comment list method 1, compare low, use JSX and JS syntax together
    /* var arr = []
    this.state.cmts.forEach(item => {
      arr.push({item.user})
    }) */
    //#endregion

    return 
      Comment list cases
      {/ * we can directly use the array map function in JSX syntax to traverse every item of the array, and use the map to return the latest array after the operation * /}
      {this.state.cmts.map((item, i) => {
        // return 
        return 
      })}
    
  }
}

Using CSS modularization

  1. You can enable modularity for CSS loader in webpack.config.js:
    css-loader?modules&localIdentName=[name]_[local]-[hash:8]
  2. Use:global()Define global style

Configuration in webpack

module: {
    rules: [
      {test: / \. CSS $/, use: ['style loader ','css loader? Modules & localidentname = [name]] [local] - [hash: 5]']}, // enable CSS modularization by adding modules parameters to CSS loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000' },
      { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }

Style style

.box{
  border: 1px solid #ccc;
  padding-left: 15px;
  box-shadow: 0 0 6px #ccc;
  margin: 10px 0;
}
/*Note: after CSS modularization is enabled, all class names here are private. If you want to set the class name as a global class, you can wrap the class name with: global()*/
/*When the global class style is set with: global(), the class will not be renamed*/
/*Only private classes are renamed*/
:global(.title){
  color:red;
  text-align: center;
}
.title{
  color: green;
  font-size: 16px;
}

.body{
  font-size: 14px;
  color:red;
}

Components of a comment

import React from 'react'
//Note: when using import, import can only be placed at the beginning of the module
import inlineStyles from './cmtItemStyles.js'

//Import the style file of the comment item [this CSS import form of direct import '.. / path identifier' is not modular CSS]
// import '../../css/commentItem.css'
//By default, if modularity is not enabled for CSS, the received itemstyles are empty objects, because in. CSS stylesheets, objects cannot be exported directly through JS's export defualt

//When CSS modularization is enabled, the itemstyles obtained by importing the style sheet become a style object, in which the property name is the class name defined in the style sheet and the property value is a complex class name generated automatically (to prevent class name conflicts)
import itemStyles from '../../css/commentItem.css'
console.log(itemStyles)

//Encapsulates a comment component, which is directly defined as a stateless component because it does not need its own private data
export default function CommentItem(props) {
  //Note: if you want to use the style attribute to set the style of DOM elements created for JSX syntax, you can't write the style as in web pages; instead, you need to use js syntax to write the style
  //When writing style, the {} of the outer layer means to write JS code, and the {} of the inner layer means to use a JS object to represent style
  //Note: in style rules, if the unit of attribute value is Px, PX can be omitted. Just write a value directly


  //#Region style optimization 1
  /*  const boxStyle = { border: '1px solid #ccc', margin: '10px 0', paddingLeft: 15 }
   const titleStyle = { fontSize: 16, color: "purple" }
   const bodyStyle = { fontSize: 14, color: "red" } */
  //#endregion


  //#Region style optimization 2 encapsulates style objects into a unique object
  /* const inlineStyles = {
    boxStyle: { border: '1px solid #ccc', margin: '10px 0', paddingLeft: 15 },
    titleStyle: { fontSize: 16, color: "purple" },
    bodyStyle: { fontSize: 14, color: "red" }
  } */
  //#endregion


  /* return 
    Reviewer: {props. User}
    Comments: {props. Content}
   */


  //Note: when you miss the scoped instruction in Vue, always know that there is no concept of instruction in react
  return 
    Reviewer: {props. User}
    Comments: {props. Content}
  
}