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端口，當然你也可以自己修改