[React] React Fundamentals: Precompile JSX
React jsx Fundamentals
2023-09-14 09:00:55 时间
The JSX Transformer library is not recommended for production use. Instead, you'll probably want to precompile your JSX into JavaScript.
Install:
npm install react-tools -g
Run:
jsx dev build --no-cache-dir --watch //watch dev dir and compile js to build dir
You also need to change html a little bit:
dev/index.html
<!doctype html> <html lang="en"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="style.css"/> <script src="//fb.me/react-0.13.3.js"></script> <script src="//fb.me/JSXTransformer-0.13.3.js"></script> <meta charset="utf-8"> <title>Compiler Dev</title> </head> <body> <script type="text/jsx" src="app.js"></script> </body> </html>
build/index.html
<!doctype html> <html lang="en"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="style.css"/> <script src="//fb.me/react-0.13.3.js"></script> <!-- no jsx file included--> <meta charset="utf-8"> <title>Compiler Dev</title> </head> <body> <!-- no type="jsx/text" --> <script src="app.js"></script> </body> </html>
相关文章
- react的jsx语法是怎样解析的
- React 新特性 React Hooks 的使用
- activiti7入门_react demo
- 01-React基础(JSX, State, Refs, Props组件交互, Event, 生命周期)
- React 时间控件
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- React + Typescript: 开启 HMR/Hot Loader
- react面试题详解
- 学用Hook写React组件——通用弹出层
- React源码分析1-jsx转换及React.createElement
- React魔法堂:echarts-for-react源码略读
- react的jsx语法是怎样解析的
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- react生命周期总结(旧、新生命周期及Hook)
- react源码分析:深度理解React.Context_2023-02-28
- 从React源码开始分析useEffect
- react的jsx语法是如何解析的
- 从react源码角度看React-Hydrate原理
- react hook开发遇到的一些问题
- 失败前端一面必会react面试题集锦
- React源码分析7-state计算流程和优先级6
- react源码分析:babel如何解析jsx_2023-02-06
- 为什么我们放弃了Vue?Vue和React深度比较
- 探索React框架中MySQL数据库的应用(react mssql)