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

react

承接上两篇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语法的基本使用就结束了