webpack基础篇(四):资源解析--解析 React JSX

网友投稿 648 2022-10-17

webpack基础篇(四):资源解析--解析 React jsX

webpack基础篇(四):资源解析--解析 React JSX

说明

​​玩转webpack​​课程学习笔记。

解析 React JSX

1、安装依赖

​​npm i react react-dom -S​​​ 、​​npm i @babel/preset-react -D​​

2、在​​.babelrc​​​增加 React 的 ​​babel preset​​ 配置

{ "presets": [ "@babel/preset-env", "@babel/preset-react" ]}

3、编写react组件测试

​​search.js​​文件

import React from 'react';import ReactDOM from 'react-dom';class Search extends React.Component { render() { return

Search Text
}}ReactDOM.render( , document.getElementById('root'))

编写一个html文件,引用打包好之后的 ​​search.js​​ 文件

注意:需要创建一个​​root​​根元素.

Document

浏览器打开​​index.html​​文件

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:基于SpringBoot实现自动装配返回属性的设计思路
下一篇:BlendUI- Web 端的 UI 框架
相关文章

 发表评论

暂时没有评论,来抢沙发吧~