配置React代码的打包
react代码是一套非常先进的前端框架代码,我们如果想写react的代码,如何进行react代码的打包呢?
在babel 的官网上的preset配置项,执行npm install --sava--dev @babel/preset-react
如果想对react代码打包的话,可以借助babel的preset-react,帮助我们解析react中的语法,使用她我们就可以在项目中编写react的语法结构了
安装react框架
在项目中执行 npm install react react-dom -D
来安装react框架对应的内容
import '@babel/polyfill';
import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
render () {
return <div>Hello World</div>
}
}
ReactDom.render(<App />, document.getElementById('root'))
react代码的含义是:使用react框架创建了一个组件,这个组件会在页面上渲染出div中 HelloWorld这样的内容,ReactDOM会将这个组件挂载到页面上html id为root的DOM节点上,这个节点上就会展示出HelloWorld的内容
运行项目,项目会报错,无法识别语法的内容,所以我们使用webpack结合babel直接打包是不行的,如果想用webpack结合babel打包react框架代码,需要使用npm install --sava--dev @babel/preset-react
,并在babelrc中做配置
"presets": [
[
"@babel/preset-env", {
"useBuiltIns": "usage"
}
],
[
"@babel/preset-react"
]
]
babel在做打包的时候,转换一下react的语法,preset中的语法转换是有顺序的,会先执行preset-react转换react语法,之后再去执行preset-env,也就是从下往上的执行顺序,从右往左的执行顺序。
重新运行项目,就可以看到react语法可以正常运行了。
加粗样式