webpack4+React组件使用

最新推荐文章于 2021-07-21 11:10:38 发布

黄尚炎

最新推荐文章于 2021-07-21 11:10:38 发布

阅读量263

点赞数

分类专栏： react webpack 文章标签： React组件使用

本文链接：https://blog.csdn.net/weixin_44702125/article/details/89441784

版权

webpack 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

react

4 篇文章 0 订阅

订阅专栏

创建组件
方式一：全局创建组件注意：组件名称：首字母必须大写
function HelloWorld(props){
//必须return 合法的jsx 元素
//return null;
//注意：props 只读
return

组件方式一：全局创建 HelloWorld{ props.name}

;
}
**方式二：**使用class 继承
入门案例：
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
CSS:
cnpm install style-loader css-loader -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”,
“html-webpack-plugin”: “^3.2.0”,
“style-loader”: “^0.23.1”,
“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”,
“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 $KaTeX parse error: Expected 'EOF', got '}' at position 71: …de_modules/ }̲,{ test:/\.…$ /,//匹配规则
use:[‘style-loader’,‘css-loader?modules’]//指定解析器 //?modules css启用模块化,防止样式冲突
}
]
},resolve:{//省略后缀名，不配置，默认只能省略.js 和.json
extensions: [’.js’, ‘.jsx’, ‘.json’],
alias:{//取别名
‘@’:path.join(__dirname,’./src’) //表示把src目录,可以使用@替代
}
}
}
3.代码：
index.html
<html>
<head>
</head>
<body>
<div id=“app”>
</body>
</html>
index.js
//导入组件：生成虚拟DOM对象，生命周期
import React from ‘react’
//导入组件：把创建好的组件和虚拟DOM对象，渲染到页面
import ReactDOM from ‘react-dom’

//导入外部组件注意默认情况下，后缀名称，不能省略
//使用 @ 符号替代 src 目录，需要配置 webpack.config.js文件,取别名
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.css’
//开启模块后 cmtcss 就有值了，使用样式是，通过这对象，获取生成的唯一字符串

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’},
]
}
}
render(){
return <div >
<h1 className={cmtcss.title}>评论人列表</h1>
{this.state.datas.map(item=><CmtIteml key={item.id} {…item}>)}
</div>;
}
}
CmtIteml.jsx
//导入组件：生成虚拟DOM对象，生命周期
import React from ‘react’
import cmtcss from ‘@/css/cmtlist.css’

export default function CmtIteml(props){
//必须return 合法的jsx 元素
//return null;
//注意：props 只读
return <div className={cmtcss.cmtbox}>
<h1 className={cmtcss.content}>评论人：{props.user}</h1>
<p>评论内容：{props.content}</p>
</div>;
}
cmtlist.css
.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;

}

黄尚炎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4+React组件使用

创建组件方式一：全局创建组件注意：组件名称：首字母必须大写function HelloWorld(props){//必须return 合法的jsx 元素//return null;//注意：props 只读return 组件方式一：全局创建 HelloWorld{ props.name};}**方式二：**使用class 继承入门案例：1.安装：webpack:cnpm ...
复制链接

扫一扫