React 项目--引入bebal 解析JSX（5）

通过webpack创建react，我们可以观看前面的博文：

https://blog.csdn.net/datouniao1/article/details/119460618

我们知道是React项目实质是将相关的组件渲染到页面的容器中，那么组件的编写有两种办法

第一种：通过React.createElement的方式创建组件

// 导入react
import React from 'react'  //创建组件，虚拟DOM 元素，生命周期
import ReactDOM from 'react-dom'   //把创建好的组件和虚拟DOM 放到页面上展示// 创建虚拟DOM 元素
// 参数1：创建元素的类型，字符串 表示元素的名称
// 参数2：是一个对象或者null 表示这个元素的属性
// 参数3：子节点 （包括其它 虚拟的DOM 获取文本节点）
// 参数n：其它的子节点const myh2=React.createElement('h1',{id:'myh1',title:'this is title'},'这是一个大大的H1')
const myDiv=React.createElement('div',{id:'mydiv1',title:'this is div'},'这是一个大大的div2',myh2)
//参数1 要选线的react元素
//参数2 页面上的容器
ReactDOM.render(myDiv,document.getElementById("app"));

但是这样的一种方式我们可以看到的是很麻烦，我们向页面添加一个元素都需要createElement一下，我们页面上的元素可能有很多，那这样需要create很多的元素，确实很麻烦。当然我们希望能和之前的写html代码一样，react为了解决这样的问题，也就是出现了babel，babel我们知道balbel的作用是解析.js文件中的html代码，引入babel，我们就可以在js文件中写html代码

我们先看这样的代码：

在index.js 文件中：

import React from 'react'
import ReactDOM from 'react-dom'
const myh1=<h1>你好，我是H1</h1>
ReactDOM.render(myh1,document.getElementById("app"));

这个里面我们的myh1 这个变量是HTML代码，我们想把这个代码直接的渲染到页面上

但是页面上无法解析

因为这个时候 .js 中的html 代码浏览器是没有办法解析，但是浏览器却人React.createElement这个语法所以我们不得不将.js 中的标签转换为createElement的形式，如何转换，所以babel就登场了，babel就是这样的作用，他能将.js 中的html代码转换为React.createElement的形式

1. 安装babel

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

2. webpack.config.js 中添加module

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin'); //导入，在内存中自动生成 index 页面
const htmlPlugin=new HtmlWebpackPlugin({template:path.join(__dirname,'./src/index.html'),filename:'index.html'
});
module.exports={mode:'development',plugins:[htmlPlugin],module:{rules:[{test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/}]}
}

3.在根目录新建.babelrc文件

{"presets":["env","stage-0","react"],"plugins":["transform-runtime"]
}

然后运行项目：

npm run dev

但是运行的时候报错，原因是babel 和babel-loader的版本不兼容

我们需要执行：

cnpm i babel-loader@7 -D

之后重新运行：

npm run dev

上面我们的项目中就引入的babel ，接下来在js代码中编写html代码，然后看浏览器是否还有报错


import React from 'react'
import ReactDOM from 'react-dom'
const myh1=<div>我是div 标签<h1>你好，我是H1</h1></div>
ReactDOM.render(myh1,document.getElementById("app"));

对应的页面上也没有出现报错，这一点说明的是我们babel 将我们js代码中的html代码转换成为了

浏览器能够解析的React.createElement的形式，也就是babel的作用

希望对你有所帮助

React 项目--引入bebal 解析JSX（5）相关推荐

echarts 按需引入模_【React】react项目引入echarts插件
参考npm文档:[echarts-for-react](echarts-for-react) 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装第一步:npm安装echa ...
关于 react项目引入 less不起作用的问题解决
大家好 2022年第一篇文章本次探究的话题是 react如何使用less 众所周知 react 引入sass scss 但是没有less 我们要用less怎么办废话短说看操作方案一导出web ...
react项目中，使用.jsx和.js文件书写react代码时，这两者有什么差异性？
我在js中用JSX的语法写,和在JSX中用JSX的语法写,然后用webpack打包编译,都能达到同样的效果,为什么还会有一个.JSX后缀的文件. 写.VUE文件时官方造成.Vue格式它能够以Vue官方 ...
react项目引入antd后npm start控制台报错(Failed to parse source map: ‘webpack://antd/./components/config-provid)
bug背景初学react,跟着b站视频学习antd的引入,引入如下: import { Button } from 'antd'; import 'antd/dist/antd.css' 在终端np ...
react项目引入scss
首先下载依赖 yarn add sass-loader node-sass 然后在项目路径 node_modules/react-scripts/config/webpack.config.js 打开 ...
react中引入html文件,在react中怎么引用js
在react中怎么引用js 推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入. 第一种:使用插件 react-load-script 如果 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
git 创建webpack项目_近期总结：手动搭建react项目，将项目从自己的库引入到新的项目中使用...
背景:最近公司有这样一个需求,需要开发一个react工具类,这个工具类可以用在其他项目里使用,并且这个工具类比较大,需要多人协作开发. 这个项目主要由同事负责,于是同事就将这个工具类当成一个单独的 ...
react项目通过iframe方式引入html页面
项目中会碰到在react项目中引入html静态页面的需求,以下是解决方法: 主要实现:通过<iframe>方式引入,以下是核心代码部分: import data from './data. ...

React 项目--引入bebal 解析JSX（5）

React 项目--引入bebal 解析JSX（5）相关推荐

最新文章

热门文章