{"id":590,"date":"2023-10-20T14:02:10","date_gmt":"2023-10-20T14:02:10","guid":{"rendered":"http:\/\/emacslisp.com\/?p=590"},"modified":"2023-10-21T12:47:07","modified_gmt":"2023-10-21T12:47:07","slug":"babel-cli-to-translate-html-loop-in-jsx-to-react-createelement","status":"publish","type":"post","link":"http:\/\/emacslisp.com\/?p=590","title":{"rendered":"Babel Cli to translate html loop in jsx to React.createElement"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">step 1: create a project using following command line<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>npm init\nnpm install --save-dev babel-cli\nnpm install babel-plugin-transform-react-jsx<\/code><\/pre>\n\n\n\n<p>save following code into build.sh<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.\/node_modules\/.bin\/babel --plugins transform-react-jsx index.jsx<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">step 2: create .babelrc<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"presets\": &#91;\"es2015\", \"react\"]\n}<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">step 3: create index.jsx<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n\nconst items = &#91;\n  { id: 1, name: 'Item 1' },\n  { id: 2, name: 'Item 2' },\n  { id: 3, name: 'Item 3' },\n];\n\nfunction MyComponent() {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Items List&lt;\/h1&gt;\n      &lt;ul&gt;\n        {items.map(item =&gt; (\n          &lt;li key={item.id}&gt;{item.name}&lt;\/li&gt;\n        ))}\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">final step: run build.sh<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }\n\nvar items = &#91;{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }];\n\nfunction MyComponent() {\n  return _react2.default.createElement(\n    'div',\n    null,\n    _react2.default.createElement(\n      'h1',\n      null,\n      'Items List'\n    ),\n    _react2.default.createElement(\n      'ul',\n      null,\n      items.map(function (item) {\n        return _react2.default.createElement(\n          'li',\n          { key: item.id },\n          item.name\n        );\n      })\n    )\n  );\n}\n\nexports.default = MyComponent;<\/code><\/pre>\n\n\n\n<h1 class=\"wp-block-heading\">Summary<\/h1>\n\n\n\n<p>you could see that items.map(item =&gt; ()) has been translated into _react2.default.createElement(&#8230;items.map(function (item) {}&#8230; ).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>step 1: create a project using following command line save following code into build.sh step 2: create .babelrc step 3: create index.jsx final step: run build.sh Summary you could see that items.map(item =&gt; ()) has been translated into _react2.default.createElement(&#8230;items.map(function (item) {}&#8230; ).<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-590","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/posts\/590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/emacslisp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=590"}],"version-history":[{"count":8,"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/posts\/590\/revisions"}],"predecessor-version":[{"id":599,"href":"http:\/\/emacslisp.com\/index.php?rest_route=\/wp\/v2\/posts\/590\/revisions\/599"}],"wp:attachment":[{"href":"http:\/\/emacslisp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/emacslisp.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=590"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/emacslisp.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}