DEV Community
·
React 中 JSX 编写的全面指南（结合 Vite）
💡
原文英文，约1000词，阅读约需4分钟。
📝
内容提要
JSX是React中的语法扩展，允许在JavaScript中编写类似HTML的代码。它是React框架的核心部分，以声明式的方式创建用户界面。本指南探讨了JSX的语法、概念和最佳实践，不涉及React或Vite的设置。
🎯
关键要点
- JSX是React中的语法扩展，允许在JavaScript中编写类似HTML的代码。
- JSX是React框架的核心部分，以声明式的方式创建用户界面。
- JSX看起来像HTML，但在底层被转换为JavaScript。
- JSX允许将HTML样式的代码与JavaScript混合，创建动态组件。
- JSX可以嵌入任何JavaScript表达式，使用大括号{}包裹。
- JSX可以赋值给变量、作为函数参数传递和从函数返回。
- 在JSX中，属性名使用camelCase，例如className和onClick。
- JSX中的子元素可以嵌套，包括文本、元素或其他组件。
- React允许在JSX中使用条件渲染，常用三元运算符。
- 使用逻辑与（&&）渲染条件元素。
- JSX中的内联样式以对象形式书写，属性使用camelCase。
- CSS模块允许作用域CSS，防止命名冲突。
- 渲染列表时，每个元素应具有唯一的key属性。
- JSX中的事件处理程序使用camelCase语法，并接受函数作为处理程序。
- 使用React Fragments包裹多个元素，避免额外的div。
- 组件名称应以大写字母开头，React将小写标签视为DOM元素。
- 编写干净可读的JSX，通过创建可重用组件来避免深层嵌套结构。
- 在Vite中，JSX的功能与Create React App相同，但构建过程经过优化以提高速度和性能。
➡️
