入门案例：
1.安装组件
webpack:
cnpm install webpack webpack-cli -D
webpack-dev-server:
cnpm i webpack-dev-server -D
babel:
cnpm i babel-loader -D
cnpm i @babel/core @babel/plugin-transform-runtime @babel/preset-env -D
cnpm install @babel/runtime @babel/runtime-corejs2 -S
cnpm i @babel/preset-react -D
cnpm i @babel/plugin-proposal-class-properties -D
cnpm i babel-plugin-transform-class-properties -D
React:
cnpm i react react-dom -S
html:
cnpm install html-webpack-plugin -D
bootstrap:
cnpm i bootstrap@3.3.7 -S
url-loader:
cnpm install file-loader url-loader -D
sass-loader
cnpm i sass-loader node-sass -D
2.配置文件：
package.json
{
“name”: “day02”,
“version”: “1.0.0”,
“description”: “”,
“main”: “webpack.config.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
+“dev”: "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“@babel/core”: “^7.4.3”,
“@babel/plugin-syntax-class-properties”: “^7.2.0”,
“@babel/plugin-transform-runtime”: “^7.4.3”,
“@babel/preset-env”: “^7.4.3”,
“@babel/preset-react”: “^7.0.0”,
“babel-loader”: “^8.0.5”,
“babel-plugin-transform-class-properties”: “^6.24.1”,
“babel-plugin-transform-property-literals”: “^6.9.4”,
“css-loader”: “^2.1.1”,
“file-loader”: “^3.0.1”,
“html-webpack-plugin”: “^3.2.0”,
“node-sass”: “^4.11.0”,
“sass-loader”: “^7.1.0”,
“style-loader”: “^0.23.1”,
“url-loader”: “^1.1.2”,
“webpack”: “^4.30.0”,
“webpack-cli”: “^3.3.0”,
“webpack-dev-server”: “^3.3.1”
},
“dependencies”: {
“@babel/runtime”: “^7.4.3”,
“@babel/runtime-corejs2”: “^7.4.3”,
“bootstrap”: “^3.3.7”,
“react”: “^16.8.6”,
“react-dom”: “^16.8.6”
}
}
.babelrc:
{
“presets”: [
“@babel/preset-env”,"@babel/preset-react"
],“plugins”: [
“@babel/plugin-transform-runtime”,
“@babel/plugin-syntax-class-properties”,
“transform-class-properties”
]
}
webpack.config.js:
const path=require(‘path’)
//把html映射的项目跟目录
const HtmlWebPackPlugin=require(‘html-webpack-plugin’)
//创建插件实例
const htmlPlugin=new HtmlWebPackPlugin({
template:path.join(__dirname,’./src/index.html’),//源文件
plugins:‘index.html’//映射的目录，默认项目跟目录
})
//向外暴露一个配置对象
module.exports={
mode:‘development’,//development ,production
plugins:[//第三方插件
htmlPlugin
],module:{//第三方模块匹配规则
rules:[
{
test:/.js|jsx$/,//匹配规则
use:‘babel-loader’,//指定解析器
exclude:/node_modules/
},{
test:/.css$/,//匹配规则
use:[‘style-loader’,‘css-loader’]//指定解析器 //?modules css启用模块化,防止样式冲突
//localIdentName 指定设置生成class对应值，不设置默认使用的是[hash:length] length最多32
//localIdentName支持：[path] 表示css文件路径,[name]:css文件名 ,[local]表示定义的css名称
//[hash:length] 生成32位哈希值
},
{//字体
test:/.ttf|woff|woff2|eot|svg$/,//匹配规则
use:‘url-loader’//指定解析器 ,注意 内部会依赖 file-loader
},
{//scsss
test:/.scss$/,//匹配规则
use:[‘style-loader’,‘css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]’,‘sass-loader’]//指定解析器 ,注意 内部会依赖 file-loader
}
]
},resolve:{//省略后缀名，不配置，默认只能 省略.js 和.json
extensions: [’.js’, ‘.jsx’, ‘.json’],
alias:{//取别名
‘@’:path.join(__dirname,’./src’) //表示把src目录,可以使用@替代
}
}
}
3.代码：
index.html:
<html>
<head>
</head>
<body>
<div id=“app”></div>
</body>
</html>
index.js:
//导入组件
import React from ‘react’
import ReactDOM from ‘react-dom’
//导入外部组件
import CmtList from ‘@/components/CmtList’
ReactDOM.render(<div>
{
//把组件名称当作标签使用
}
<CmtList></CmtList>
</div>,document.getElementById(‘app’))
CmtList.jsx:列表组件
//导入组件：生成虚拟DOM对象，生命周期
import React from ‘react’
//导入列表项
import CmtIteml from ‘@/components/CmtIteml’
//导入css样式 整个项目生效，这要组件多了，会导致样式冲突
//通过配置文件webpack.config.js开启css 模块化
//开启模块化后，会为每一个样式生成一个唯一的字符串
import cmtcss from ‘@/css/cmtlist.scss’
//开启模块后 cmtcss 就有值了，使用样式是，通过这对象，获取生成的唯一字符串
//导入 bootstrap,注意：引用模块，默认就会去 node_modules ，目录查找
//所以可以省略node_modules
import bootcss from ‘bootstrap/dist/css/bootstrap.css’
export default class CmtList extends React.Component{
constructor(){
super()
this.state={
datas:[
{id:1,user:‘aaa’,content:‘哈哈沙发12’},
{id:2,user:‘bbb’,content:‘哈哈沙发df’},
{id:3,user:‘ccc’,content:‘哈哈沙发sd’},
],titlemsg:‘评论列表’
}
}
myclilc(){
alert(‘myclilc’)
}
myclilc2(params){
alert(params)
console.log(this)
//这样使用发现数据改变了，但是没有刷新到页面上
this.state.titlemsg=params
//注意：React 数据改变刷新到页面上 需要使用提供的 //this.setState({},callback) 函数
this.setState({titlemsg:params})
//注意： this.setState 这个方法的执行是异步的
}
render(){
return <div >
{/*注意：带-的属性，不能直接取，需要通过[]取：举例： btn-primary bootcss[‘btn-primary’]
第三方 ，css样式，这样使用比较繁琐，应该把第三方 css样式，不要模块化，全局有效
如果这样做，就需要区分本地css样式与第三方css样式：
可以把本地css样式文件后缀，改成 .scss 或者 .less ，启动模块化，只针对 .scss .less 两类文件
<button className={[bootcss.btn,bootcss[‘btn-primary’]].join(" ")}>添加评论</button>
*/}
{/标准用法/}
<button className=“btn btn-primary” onClick={()=>this.myclilc2(‘aaabbbccc’)}>添加评论</button>
<input ref=“inpMsg” type=“text” style={{width:‘50%’}} value={this.state.titlemsg} onChange={(e)=>{
//获取文本框的值
//方式一：通过事件参数 e
//console.log(e.target.value)
//this.setState({
//titlemsg:e.target.value
//})
//方式二：this.refs 获取
//console.log(this.refs.inpMsg.value)
this.setState({
titlemsg:this.refs.inpMsg.value
})
}}></input>
<h1 className={cmtcss.title}>{this.state.titlemsg}</h1>
{this.state.datas.map(item=><CmtIteml key={item.id} {…item}></CmtIteml>)}
</div>;
}
}
CmtIteml.jsx:
//导入组件：生成虚拟DOM对象，生命周期
import React from ‘react’
import cmtcss from ‘@/css/cmtlist.scss’
export default function CmtIteml(props){
//必须return 合法的jsx 元素
//return null;
//注意：props 只读
return <div className={cmtcss.cmtbox}>
<h1 className={cmtcss.content}>评论人：{props.user}
<p>评论内容：{props.content}
;
}
cmtlist.scss:
/* .title 与 :local(.title) 效果一样，默认自带 :local 表示 模块化 */
:local(.title){
font-size:14px;
color:red;
}
.content{
font-size:12px;
}
.cmtbox{
border:1px dashed #ccc;
margin:10px;
padding:10px;
box-shadow:0 0 10px #ccc;
}
/*:global(名称) 不会被模块化, 全局生效 */
:global(.italic){
font-style:italic;
}
项目结构
demo:
.babelrc
package.json
webpack.config.js
|-src
|-components
|-CmtIteml.jsx
|-CmtList.jsx
|-css
|-cmtlist.scss
|-index.html
|-index.js
|-dist
案例下载
2000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
