今天手把手保姆级的带大家建立一个简单的React工程
初始化项目
创建一个空项目
npm init
一直回车就行
安装react依赖
npm install react react-dom --save
react代码无法直接在浏览器中运行，所有需要用到转码，我们使用babel对react进行转码，转换成浏览器熟悉的原生js代码
安装babel
npm install babel-loader --save-dev
npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties --save-dev
创建.babelrc文件
添加预设和插件
{
"presets": ["@babel/preset-env","@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
webpack
为了实现工程中所有文件的转码，我们必须使用打包工具
npm install webpack --save-dev
npm install webpack-cli --save-dev
webpack-dev-server
安装前端简单的服务器
npm install webpack-dev-server --save-dev
package.json中所有依赖的清单
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
创建webpack.config.js
var config = {
entry:[
'./app.js'
],
output:{
path:'/build',
filename:'index.js',
},
devServer:{
inline:true,
port:7777
},
module:{
rules:[
{
test:/\.js$/,
use:{
loader: 'babel-loader',
},
exclude: '/node_modules/'
}]
}
}
module.exports = config;
创建入口文件app.js
import React from 'react'
import ReactDOM from 'react-dom'
import Parent from './Parent'
ReactDOM.render(
<h1><Parent/></h1>,
document.getElementById('root')
);
创建React父子组件
我这简单创建了两个组件，并实现子父组件的传值
父组件Parent.js
import React,{Component} from 'react'
import Child from './Child.js'
export default class Parent extends Component{
constructor(props) {
super(props);
this.state = {msg:''};
}
getData = (data)=>{
this.setState({
msg:data
})
console.log(data);
}
render(){
const {msg} = this.state
return (
<div>
<div>我是爸爸</div>
<div>{msg}</div>
<Child getData={this.getData}/>
</div>
)
}
}
子组件Child.js
import React,{Component} from 'react'
class Child extends React.Component{
constructor(props) {
super(props);
this.state = {text:'爸爸，我爱你！'};
}
render(){
const {text}=this.state;
return(
<div style={{height:100,width:100,background:'red',textAlign:'center'}}>
<div>我是儿子</div>
<button onClick={()=>{this.props.getData(text)}}>想告诉爸爸</button>
</div>
)
}
}
export default Child
修改package.json
修改启动指令
"scripts": {
"start": "webpack-dev-server --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
最终的工程目录
接下来我们小试牛刀
让它跑起来！🏃🏃
启动程序
npm start
试验一下组件传值
多么感人的结局😭😿
-----------------END-------------------
最后 🙌
好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~
网友评论