Wepack+react中JSX语法使用基础（三）

承接上两篇webpack基础用法 地址：https://blog.csdn.net/weixin_43259355/article/details/107157980

上一篇记录到简单react页面渲染：

接下来介绍如何在react项目 js文件中写入 html结构
（1）什么是JSX语法： 就是符合xml规范的js语法（语法格式相对来说，要比HTML严谨的多）
（2）使用JSX语法：
安装babel插件
运行 cnpm install babel-core babel-loader babel-plugin-transform-runtime -D
运行 cnpm install babel-preset-env babel-preset-stage-0 -D
运行 cnpm install babel-preset-react -D
(3) 在webpack.config.js文件中配置babel-loader插件

（4)新建一个.babelrc文件写入
{
“presets”: [“env”, “stage-0”,“react”],
“plugins”:[“transform-runtime”]
}

（5）打开src/index.js文件

到此JSX语法的基本使用就结束了