简介
JSX是一种用于描述UI的语言，它可以在JavaScript中定义HTML元素。由Facebook与React项目一同发布，定位为开发大型应用时封装组件的基础，以使组件间调用和传递数据成为可能。在 React Native 也被广泛使用。
该特殊语法的出现极大地提高了使用 JavaScript 开发 UI 的工作效率，但它不是原生 JavaScript 代码。ES7（也称 ECMAScript 7） 通过引入 JSX 语法，使得我们可以像编写 HTML 标记一样编写 React 组件，让程序员感觉就像写 HTML 看起来那么舒服自然。在本篇教程中，我们将介绍如何在项目中添加对 JSXT 的支持。
步骤
步骤1：安装babel插件
首先要在您的项目中安装支持JSX的Babel插件，它允许您的浏览器在运行JSX时识别和解析代码。您可以使用以下命令进行安装：
--- ------- ---------- ----------- -------------------
步骤2：项目配置文件
接下来需要更新Babel配置文件中的preset选项。在 .babelrc 文件中添加以下内容：
- ---------- ----------------------- -
步骤3：添加JSX文件
新建一个jsx文件，在其中编写 JSX 语法的代码。在React中，可以使用以下语法来渲染一个简单的'Hello World！'：
------ ----- ---- --------
----- ---------- - -- -- -
------ -
-----
--------- -----------
------
--
--
------ ------- -----------此时你会发现代码编辑器会对 JSX 代码进行代码格式高亮。
步骤4：在项目中引入JSX
最后一步是在您的主体代码中引用JSX文件。这就像引用其他模块一样简单。例如，在您的 App.js 文件中：
------ ----- ---- --------
------ ---------- ---- --------------------------
-------- ----- -
------ -
---- ----------------
----------- --
------
--
-
------ ------- ----最终的渲染结果就会输出 Hello World! 的文本。
结论
有了这个支持，您将能够更轻松地创建高效并且易于阅读的 UI 组件。只需要添加配置、新建 jsx 文件和再主体代码中引用即可让 JSX 的语法在您的项目中生效。这篇教程希望能够帮助您开始学习JSX，并成功实现对 ES7 中JSX语法的支持。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6729d6792e7021665e25cf1d