{"id":23342,"date":"2024-04-08T20:03:28","date_gmt":"2024-04-08T19:03:28","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/atomico-props-y-hooks-en-atomico-webcomponents-javascript-en-espanol\/"},"modified":"2024-06-03T17:32:55","modified_gmt":"2024-06-03T16:32:55","slug":"atomico-props-y-hooks-en-atomico-webcomponents-javascript-en-espanol","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/atomic-props-and-hooks-in-atomic-webcomponents-javascript-in-spanish\/","title":{"rendered":"Atomico: Props and Hooks in Atomico \u2013 WebComponents Javascript in Spanish"},"content":{"rendered":"<p>In this article we will talk about Atomico, a JavaScript library that allows you to create reusable and customizable web components. We&#039;ll explore how to work with Props and Hooks in Atomico and how they can improve our development experience. Atomico uses the concept of WebComponents, which is a World Wide Web Consortium (W3C) specification that allows you to create custom, reusable HTML elements.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/atomic-props-and-hooks-in-atomic-webcomponents-javascript-in-spanish\/#%C2%BFQue_son_los_Props_en_Atomico\" >What are Props in Atomico?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/atomic-props-and-hooks-in-atomic-webcomponents-javascript-in-spanish\/#%C2%BFQue_son_los_Hooks_en_Atomico\" >What are Hooks in Atomico?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/atomic-props-and-hooks-in-atomic-webcomponents-javascript-in-spanish\/#Creando_un_componente_basico_en_Atomico\" >Creating a basic component in Atomico<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/atomic-props-and-hooks-in-atomic-webcomponents-javascript-in-spanish\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/atomic-props-and-hooks-in-atomic-webcomponents-javascript-in-spanish\/#%C2%BFEs_Atomico_compatible_con_React\" >Is Atomico compatible with React?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/atomic-props-and-hooks-in-atomic-webcomponents-javascript-in-spanish\/#%C2%BFCual_es_la_diferencia_entre_Atomico_y_React\" >What is the difference between Atomico and React?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/atomic-props-and-hooks-in-atomic-webcomponents-javascript-in-spanish\/#%C2%BFCual_es_la_ventaja_de_utilizar_Atomico\" >What is the advantage of using Atomico?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_los_Props_en_Atomico\"><\/span>What are Props in Atomico?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Props are attributes used to pass data from a parent component to a child component. In Atomico, Props are defined as properties in the component tag and are accessed in the child component through the object <\/p>\n<pre>this.props<\/pre>\n<p>. This allows data to be communicated in a unidirectional manner, meaning that only the parent component can modify the Props.<\/p>\n<p>Props in Atomico can also have a default value and can be validated using prop-types. This provides a simple way to ensure that the data passed to our components is of the correct type.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_los_Hooks_en_Atomico\"><\/span>What are Hooks in Atomico?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hooks in Atomico are a powerful feature that allows us to easily add additional logic to our components. Hooks allow us to use state and other React features in Atomico, making it easier to manage the lifecycle of our components and implement more complex functionality.<\/p>\n<p>Some of the most used Hooks in Atomico are:<\/p>\n<ul>\n<li><strong>useState:<\/strong> allows you to add and update the state of a component.<\/li>\n<li><strong>useEffect:<\/strong> It is used to perform side effects on the component, such as API calls or DOM manipulation.<\/li>\n<li><strong>useRef:<\/strong> returns a mutable object that remains constant throughout the life cycle of the component.<\/li>\n<\/ul>\n<p>Using Hooks in Atomico is very simple. We simply import the Hooks from the Atomico library and use them in our components as if we were using React.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creando_un_componente_basico_en_Atomico\"><\/span>Creating a basic component in Atomico<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To create a basic component in Atomico, we simply create a function that returns a custom HTML element. Next, we use the decorator <\/p>\n<pre>@atomic<\/pre>\n<p> to convert the function into an Atomic component. For example:<\/p>\n<pre><code>import { h, customElement } from &amp;quot;atomic&amp;quot;; function MyComponent() { return &lt;div&gt;Hello World!&lt;\/div&gt;; } customElement(&amp;quot;my-component&amp;quot;, MyComponent);<\/code><\/pre>\n<p>In this example, we have created a component called &quot;MyComponent&quot; that simply displays a &quot;Hello, world!&quot; in a div element. Then we use the decorator <\/p>\n<pre>customElement<\/pre>\n<p> to register our Atomic component with the name &quot;my-component&quot;.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_Atomico_compatible_con_React\"><\/span>Is Atomico compatible with React?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No, Atomico is a standalone React library. However, Atomico has been heavily inspired by React and uses similar concepts like Props and Hooks.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFCual_es_la_diferencia_entre_Atomico_y_React\"><\/span>What is the difference between Atomico and React?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The main difference between Atomico and React is that Atomico is a small and lightweight library, while React is a much larger and more complete library. Atomico focuses on providing only what is necessary to create reusable web components, while React offers a wide range of additional functionality.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFCual_es_la_ventaja_de_utilizar_Atomico\"><\/span>What is the advantage of using Atomico?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Atomico has several advantages. First of all, it is a lightweight library that can be loaded and run quickly compared to larger libraries like React. Additionally, Atomico uses the WebComponents standard, which means that our components will be compatible with other frameworks that also use this standard.<\/p>\n<p>In conclusion, Atomico is an excellent option if we are looking for a library to create reusable and customizable web components. With the ability to work with Props and Hooks, we can improve our development experience and create more robust and scalable components.<\/p>\n<p>If you have any questions or suggestions about Atomico, feel free to contact me through my blog, <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">https:\/\/nelkodev.com\/contacto<\/a>. You can also visit my project portfolio to see examples of how I have used Atomico in my projects, <a href=\"https:\/\/nelkodev.com\/en\/portfolio\/\">https:\/\/nelkodev.com\/portfolio\/<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>In this article we will discuss Atomico, a JavaScript library that allows you to create reusable and customizable web components. We will explore how to work with Props and Hooks in Atomico and how they can improve our development experience. Atomico uses the concept of WebComponents, which is a World Wide Web Consortium (W3C) specification that allows you to create web components that are [\u2026]<\/p>","protected":false},"author":1,"featured_media":23343,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1127],"tags":[1076,9,205,580,1074,185,1075,742],"class_list":["post-23342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-webcomponents","tag-atomico","tag-base-de-datos","tag-blog","tag-espanol","tag-hooks","tag-javascript","tag-props","tag-webcomponents"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23342"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23342\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23343"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}