react制作简单评论列表展示页面

效果图：

以下为源代码部分截图：

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')  
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    devtool:'eval', //source-map
    entry:{
        main:'./src/index.js'//入口文件
    },
    output:{
        path:path.join(__dirname, 'dist'),//出口文件
        filename: '[name].[hash:8].bundle.js'
    },
    resolve: {
        extensions: [' ', '.js','.jsx', '.json','.css','.less'],
        alias:{
            '@': path.join(__dirname,'./src') //这样，@就表示 项目根目录中的 src 的这一层路径
        }
    },
    module:{
        rules: [
        {
            test: /\.css$/,//加载less样式的loader
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'less-loader']
            })
        },
        {
            test: /\.less$/,//加载less样式的loader
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader?modules&localIdentName=[path][name]-[local]-[hash:6]', 'less-loader?modules']
            })
        },{
            test: /\.js|jsx$/,//用于解析es6语法的babel-loader
            exclude: /node_modules/,
            use: 'babel-loader'
        },{
            test: /\.ttf|woff|woff2|eot|svg$/,//用于解析es6语法的babel-loader
            use: 'url-loader'
        }] 
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), //热更新
        new webpack.NoEmitOnErrorsPlugin(), //错误不编译
        new ExtractTextPlugin('style.css'), //css模块独立
        new HtmlWebpackPlugin({
                title: 'Redux Practive', //标题
                // favicon: './src/assets/img/favicon.ico', //favicon路径
                filename: './index.html', //生成的html存放路径，相对于 path
                template: './src/index.html', //html模板路径
                inject: true, //允许插件修改哪些内容，包括head与body`
                minify: { //压缩HTML文件
                    removeComments: true, //移除HTML中的注释
                    collapseWhitespace: false //删除空白符与换行符
                }
        })
     ]
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'

//导入 评论 组件
import CmtList from '@/components/CmtList'

//3.调用render函数渲染
ReactDOM.render(<div>
	<CmtList></CmtList>
	</div>, document.getElementById('app'))

CmtItem.jsx

import React from 'react'

import cssobj from '@/css/cmtitem.less'
console.log(cssobj);



//使用function构造函数，定义普通的无状态组件
export default function  CmtItem(props){
	return  <div className={cssobj.cmtbox}>
		<h1 className={cssobj.title}>评论人：{props.user}</h1>
		<p className={cssobj.content}>评论内容：{props.content}</p>
	</div>
}

CmtList.jsx

import React from 'react'

//导入 列表组件需要的 样式表
import cssobj from '@/css/cmtlist.less'


//导入 评论项 子组件
import CmtItem from '@/components/CmtItem'

import 'bootstrap/dist/css/bootstrap.css'

//使用class关键字，定义父组件
export default class CmtList extends React.Component{
	constructor(){
		super()
		this.state = {
			CommentList:[
				{id:1,user:'张三',content:'哈哈，沙发'},
				{id:2,user:'李四',content:'哈哈，板凳'},
				{id:3,user:'王五',content:'哈哈，凉席'},
				{id:4,user:'赵六',content:'哈哈，砖头'},
				{id:5,user:'田七',content:'哈哈，楼下山炮'},
			]
		}
	}

	render(){
		return <div>
			{/* 注意  在JSX中，如果想写行内样式了，不能 为style设置字符串的值 */}
			{/* 而是应该这么写 style={{ color: 'red' }} */}
			{/* 在行内样式中，如果是数组类型的样式，则可以不用引号包裹，如果是 字符串类型的 样式值，必须使用引号包裹 */}
			<h1 className={[cssobj.title,'test'].join(' ')}>这是评论列表组件</h1>
			{/*<button className={[bootcss.btn,bootcss['btn-primary']].join(' ')}>按钮</button>*/}
			<button className='btn btn-primary'>按钮</button>
			<div className="panel panel-primary"></div>
			{this.state.CommentList.map(item => <CmtItem {...item} key={item.id}></CmtItem>)}
		</div>
	}
}

项目地址： https://github.com/erdfty/react-test-190819

项目下载下载运行执行  npm install，然后运行 npm start就可以启动项目了，项目运行在127.0.0.1:8087端口，当然你也可以自己修改