说明
玩转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 <div>Search Text</div> } } ReactDOM.render( <Search/>, document.getElementById('root') )
编写一个html文件，引用打包好之后的 search.js 文件
注意：需要创建一个root根元素.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> <script src="./search.js"></script> </body> </html>
浏览器打开index.html文件
