Use JSX

.vscode/settings.json

@@ -5,4 +5,5 @@
     "emmet.syntaxProfiles": {
         "javascript": "jsx"
     }
-}
+}
+

js/vademecum.js

@@ -1169,46 +1169,53 @@ const Section = (title, paragraph) => (
   </div>
 );
 
-const Product = (product, key) => {
-  return dom(
-    'div',
-    {key, className: 'product-container'},
-    dom('h3', {className: 'product-name'}, product.name),
-    dom(
-      'div',
-      {className: 'product-body'},
-      dom('p', {className: 'product-short-desc'}, product.shortDesc),
-      Section('Descripción', product.fullDesc),
-      Section('Aplicación', product.application)
-    )
-  )
-}
+const Product = (product, key) => (
+  <div className="product-container">
+    <h3 className="product-name">
+      {product.name}
+    </h3>
+    <div className="product-body">
+      <p className="product-short-desc">
+        {product.shortDesc}
+      </p>
+      {
+        Section('Descripción', product.fullDesc)
+      }
+      {
+        product.application && Section('Aplicación', product.application)
+      }
+    </div>
+  </div>
+);
 
-const Category = (categoryName, products) => {
-  return dom(
-    'div',
-    {className: 'category-container'},
-    dom('div', {className: 'category-title', id: categoryName.toLowerCase().replace(' ', '-')}, 
-      dom('h2', {className: 'category-name'}, categoryName)
-    ),
-    products.map((p, i) => Product(p, i))
-  )
-}
+const Category = (categoryName, products) => (
+  <div className="category-container">
+    <div className="category-title" id={categoryName.toLowerCase().replace(' ', '-')}>
+      <h2 className="category-name">{categoryName}</h2>
+      {
+        products.map((p, i) => Product(p, i))
+      }
+    </div>
+  </div>
+);
 
 const Vademecum = () => {
-     return categories.map((categoryName, i) => {
-      return dom(
-        'div',
-        {key: i},
+  return categories.map((categoryName, i) => (
+    <div key={i}>
+      {
         Category(categoryName, products[categoryName])
-      )
-     });
+      }
+    </div>
+  ))
 }
 
 const domContainer = document.querySelector('#vademecum');
 
-ReactDOM.render(dom(
-  'div',
-  {className: ''},
-  Vademecum()
+ReactDOM.render((
+  <div>
+    {
+      Vademecum()
+    }
+  </div>
 ), domContainer);
+

lib/vademecum.js

@@ -731,40 +731,37 @@ var Section = function Section(title, paragraph) {
 };
 
 var Product = function Product(product, key) {
-  return dom('div', {
-    key: key,
-    className: 'product-container'
-  }, dom('h3', {
-    className: 'product-name'
-  }, product.name), dom('div', {
-    className: 'product-body'
-  }, dom('p', {
-    className: 'product-short-desc'
-  }, product.shortDesc), Section('Descripción', product.fullDesc), Section('Aplicación', product.application)));
+  return dom("div", {
+    className: "product-container"
+  }, dom("h3", {
+    className: "product-name"
+  }, product.name), dom("div", {
+    className: "product-body"
+  }, dom("p", {
+    className: "product-short-desc"
+  }, product.shortDesc), Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application)));
 };
 
 var Category = function Category(categoryName, products) {
-  return dom('div', {
-    className: 'category-container'
-  }, dom('div', {
-    className: 'category-title',
+  return dom("div", {
+    className: "category-container"
+  }, dom("div", {
+    className: "category-title",
     id: categoryName.toLowerCase().replace(' ', '-')
-  }, dom('h2', {
-    className: 'category-name'
-  }, categoryName)), products.map(function (p, i) {
+  }, dom("h2", {
+    className: "category-name"
+  }, categoryName), products.map(function (p, i) {
     return Product(p, i);
-  }));
+  })));
 };
 
 var Vademecum = function Vademecum() {
   return categories.map(function (categoryName, i) {
-    return dom('div', {
+    return dom("div", {
       key: i
     }, Category(categoryName, products[categoryName]));
   });
 };
 
 var domContainer = document.querySelector('#vademecum');
-ReactDOM.render(dom('div', {
-  className: ''
-}, Vademecum()), domContainer);
+ReactDOM.render(dom("div", null, Vademecum()), domContainer);