{"id":1475,"date":"2021-12-30T12:45:59","date_gmt":"2021-12-30T12:45:59","guid":{"rendered":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/?p=1475"},"modified":"2021-12-30T12:51:18","modified_gmt":"2021-12-30T12:51:18","slug":"como-usar-theming-de-jss-si-estamos-usando-react-js","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-usar-theming-de-jss-si-estamos-usando-react-js\/","title":{"rendered":"\u00bfC\u00f3mo usar Theming de JSS si estamos usando React.js?"},"content":{"rendered":"

\"\"<\/p>\n

En ocasiones, al\u00a0desarrollar aplicaciones web\u00a0es necesario realizar un\u00a0dise\u00f1o que acepte el cambio de Tema\u00a0para\u00a0adaptarlo a las necesidades del cliente de forma din\u00e1mica y personalizando su experiencia. Si estamos usando\u00a0React.JS junto con JSS para aplicar los estilos, podemos hacerlo de forma manual a\u00f1adiendo el c\u00f3digo necesario o,\u00a0usar la caracter\u00edstica de Theming de JSS.<\/p>\n

<\/p>\n

<\/figure>\n

\u00bfQu\u00e9 es JSS?<\/h2>\n

JSS<\/a> es una herramienta que permite combinar JavaScript con CSS para poder escribir los estilos de forma declarativa, reutilizable, flexible, etc. Adem\u00e1s es\u00a0independiente del framework\u00a0que usemos, aunque, en nuestro caso, lo aplicaremos a React.<\/p>\n

Gracias a esta herramienta\u00a0podremos usar estilos din\u00e1micos, dependientes del valor de determinadas variables de nuestro c\u00f3digo JavaScript y,\u00a0este fundamento es la base sobre la que podremos aplicar temas de una forma sencilla.<\/p>\n

ThemeProvider<\/h2>\n

Vamos a entrar un poco en faena y vamos a empezar por ThemeProvider<\/a>. Ya que estamos haciendo uso de React, es f\u00e1cil pensar que una soluci\u00f3n adecuada es usar un componente, y como elementos hijos, aquellos que queramos que var\u00eden su comportamiento dependiendo del tema seleccionado.<\/p>\n

ThemeProvider <\/strong>es el componente que envolver\u00e1 aquellos a los que deseamos cambiar su comportamiento\u00a0seg\u00fan el tema seleccionado, de forma que se propagar\u00e1 por todos ellos para poder ser utilizado seg\u00fan convenga.<\/p>\n

\r\n{\r\n<ThemeProvider theme={currentTheme}>\r\n  Children...\r\n<\/ThemeProvider>\r\n<\/pre>\n
El tema <\/strong>lo definiremos como un objeto que contiene los estilos que vamos a utilizar, organizado o agrupado a nuestra conveniencia.<\/p>\n
\r\n{\r\nconst lightTheme = {\r\n  value: "light",\r\n  colors: {\r\n    background: "#ffffff",\r\n    foreground: "#0c0c0c",\r\n    border: 'cyan'\r\n  }\r\n}\r\nconst darkTheme = {\r\n  value: "dark",\r\n  colors: {\r\n    background: "#000000",\r\n    foreground: "#c0c0c0",\r\n    border: 'cyan'\r\n  }\r\n}\r\n<\/pre>\n
Obtener el tema usado<\/h2>\n
Para poder obtener el tema desde un componente,\u00a0tenemos dos opciones diferentes \u00abwithTheme\u00bb y \u00abuseTheme\u00bb<\/strong>.<\/p>\n
Es importante tener en cuenta que los componente s\u00f3lo podr\u00e1n acceder al tema si alguno de los componentes de orden superior es un ThemeProvider<\/p><\/blockquote>\n
withTheme<\/h3>\n
El uso de\u00a0withTheme<\/a>\u00a0se realiza\u00a0dentro del propio componente a la hora de exportarlo\u00a0y esto\u00a0har\u00e1 que el tema se a\u00f1ada como propiedad necesaria al invocarlo\u00a0desde un componente superior.<\/p>\n
Nuestro componente:<\/p>\n
\r\n{\r\nconst ThemedBlockStyles = createUseStyles((theme: any) =&gt; ({\r\n  themedBlock: {\r\n    padding: "20px",\r\n    margin: "20px",\r\n    textAlign: "center",\r\n    border: '1px solid ' + theme.colors.border,\r\n    borderRadius: '20px',\r\n    background: theme.colors.background,\r\n    color: theme.colors.foreground\r\n  }\r\n}));\r\n \r\nconst ThemedBlockWithTheme = (props: any) =&gt; {\r\n  const styles = ThemedBlockStyles(props.theme);\r\n \r\n  return (\r\n    &lt;&gt;\r\n    &lt;div className={styles.themedBlock}&gt;\r\n      Hello themed world!!\r\n    &lt;\/div&gt;\r\n    &lt;\/&gt; \r\n  )\r\n};\r\nexport default withTheme(ThemedBlockWithTheme);\r\n<\/pre>\n
El componente de orden superior<\/p>\n
\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<ThemedBlockWithTheme theme={currentTheme} \/><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n
Como veis, al invocar el componente, es\u00a0necesario pasarle como par\u00e1metro\/atributo el tema y, posteriormente, en el propio componente, se podr\u00e1 hacer uso de ese tema desde las propiedades\u00a0mediante \u00abprops.theme<\/em>\u00bb aprovechando para pas\u00e1rselo a los estilos creados con JSS.<\/p>\n
useTheme<\/h3>\n
useTheme<\/a>\u00a0tiene un uso un poco m\u00e1s \u00abcl\u00e1sico\u00bb y\u00a0permite, desde cualquier componente, acceder al tema\u00a0sin necesidad de que se le tenga que pasar como atributo a la hora de invocarlo.<\/p>\n
\r\n{\r\nconst ThemedBlockStyles = createUseStyles((theme: any) => ({\r\n  themedBlock: {\r\n    padding: "20px",\r\n    margin: "20px",\r\n    textAlign: "center",\r\n    border: '1px solid ' + theme.colors.border,\r\n    borderRadius: '20px',\r\n    background: theme.colors.background,\r\n    color: theme.colors.foreground\r\n  }\r\n}));\r\n \r\nconst ThemedBlockUseTheme = (props: any) => {\r\n  const theme = useTheme();\r\n  const styles = ThemedBlockStyles({...props, theme});\r\n \r\n  return (\r\n    <>\r\n    <div className={styles.themedBlock}>\r\n      Hello themed world!!\r\n    <\/div>\r\n    <\/> \r\n  )\r\n};\r\nexport default ThemedBlockUseTheme;\r\n<\/pre>\n
Y el componente de orden superior ya no tendr\u00eda que pasarle como atributo el tema a la hora de instanciarlo.<\/p>\n
\n
\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
<ThemedBlockUseTheme \/><\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n
Ejemplo<\/h2>\n
Si quer\u00e9is ver el ejemplo, pod\u00e9is ver el c\u00f3digo en mi repo de GitHub y usarlo a vuestro gusto.<\/p>\n
\"\"<\/a><\/figure>\n
 <\/p>\n
Mejoras del ejemplo<\/h2>\n
Tema del sistema<\/h3>\n
Para mejorar el ejemplo, pod\u00e9is mirar c\u00f3mo\u00a0obtener el tema del sistema usando\u00a0<\/strong>windo<\/em>w.matchMedia(\u00ab(prefers-color-scheme: dark)\u00bb);<\/em>\u00a0y as\u00ed mostrar vuestros componentes con el tema adecuado a la selecci\u00f3n del usuario en su sistema. Pod\u00e9is indagar en\u00a0este art\u00edculo<\/a>.<\/p>\n
Extender la interfaz DefaultTheme para definir el tema y tener Intellisense<\/h3>\n
Conclusiones<\/h2>\n
Como pod\u00e9is comprobar, en el c\u00f3digo de ejemplo he indicado \u00abany<\/em>\u00bb como tipo del par\u00e1metro\u00a0theme<\/em> dentro de los estilos JSS, de forma que pueda recibir cualquier objeto con la agrupaci\u00f3n deseada.<\/p>\n
Lo malo de esto es que no podemos garantizar que lo que escribamos exista, as\u00ed que, una mejor forma, es extender la interfaz DefaultTheme agregando las propiedades que queramos tener dentro de nuestro tema y as\u00ed no s\u00f3lo disponer de intellisense sino que podemos garantizar que las propiedades que vayamos a intentar usar existan en nuestro tema. Enjoy coding!<\/p>\n<\/span>","protected":false},"excerpt":{"rendered":"
En ocasiones, al\u00a0desarrollar aplicaciones web\u00a0es necesario realizar un\u00a0dise\u00f1o que acepte el cambio de Tema\u00a0para\u00a0adaptarlo a las necesidades del cliente de forma din\u00e1mica y personalizando su experiencia. Si estamos usando\u00a0React.JS junto con JSS para aplicar los estilos, podemos hacerlo de forma … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":22,"featured_media":1487,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[98],"tags":[],"class_list":["post-1475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reactjs"],"yoast_head":"\n\u00bfC\u00f3mo usar Theming de JSS si estamos usando React.js? | ENCAMINA<\/title>\n<meta name=\"description\" content=\"JSS es una herramienta que permite combinar JavaScript con CSS para poder escribir los estilos de forma declarativa, reutilizable, flexible, etc.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfC\u00f3mo usar Theming de JSS si estamos usando React.js?\" \/>\n<meta property=\"og:description\" content=\"JSS es una herramienta que permite combinar JavaScript con CSS para poder escribir los estilos de forma declarativa, reutilizable, flexible, etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/\" \/>\n<meta property=\"og:site_name\" content=\"Piensa en software, desarrolla en colores\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-30T12:45:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-30T12:51:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2021\/12\/react.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"595\" \/>\n\t<meta property=\"og:image:height\" content=\"407\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Santiago Porras Rodr\u00edguez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@saintwukong\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santiago Porras Rodr\u00edguez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blog.santiagoporras.com\\\/react-js-theming-jss\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-usar-theming-de-jss-si-estamos-usando-react-js\\\/\"},\"author\":{\"name\":\"Santiago Porras Rodr\u00edguez\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#\\\/schema\\\/person\\\/c84cf613b7c5b8d5e1f7625a3e4c8c27\"},\"headline\":\"\u00bfC\u00f3mo usar Theming de JSS si estamos usando React.js?\",\"datePublished\":\"2021-12-30T12:45:59+00:00\",\"dateModified\":\"2021-12-30T12:51:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-usar-theming-de-jss-si-estamos-usando-react-js\\\/\"},\"wordCount\":838,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/blog.santiagoporras.com\\\/react-js-theming-jss\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/wp-content\\\/uploads\\\/sites\\\/21\\\/2021\\\/12\\\/react.jpg\",\"articleSection\":[\"ReactJS\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/blog.santiagoporras.com\\\/react-js-theming-jss\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/como-usar-theming-de-jss-si-estamos-usando-react-js\\\/\",\"url\":\"https:\\\/\\\/blog.santiagoporras.com\\\/react-js-theming-jss\\\/\",\"name\":\"\u00bfC\u00f3mo usar Theming de JSS si estamos usando React.js? | ENCAMINA\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blog.santiagoporras.com\\\/react-js-theming-jss\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.santiagoporras.com\\\/react-js-theming-jss\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/wp-content\\\/uploads\\\/sites\\\/21\\\/2021\\\/12\\\/react.jpg\",\"datePublished\":\"2021-12-30T12:45:59+00:00\",\"dateModified\":\"2021-12-30T12:51:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#\\\/schema\\\/person\\\/c84cf613b7c5b8d5e1f7625a3e4c8c27\"},\"description\":\"JSS es una herramienta que permite combinar JavaScript con CSS para poder escribir los estilos de forma declarativa, reutilizable, flexible, etc.\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blog.santiagoporras.com\\\/react-js-theming-jss\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/blog.santiagoporras.com\\\/react-js-theming-jss\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/wp-content\\\/uploads\\\/sites\\\/21\\\/2021\\\/12\\\/react.jpg\",\"contentUrl\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/wp-content\\\/uploads\\\/sites\\\/21\\\/2021\\\/12\\\/react.jpg\",\"width\":595,\"height\":407},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#website\",\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/\",\"name\":\"Piensa en software, desarrolla en colores\",\"description\":\"Las ventajas que te ofrece Microsoft Azure y el mundo.NET\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/#\\\/schema\\\/person\\\/c84cf613b7c5b8d5e1f7625a3e4c8c27\",\"name\":\"Santiago Porras Rodr\u00edguez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/626d42f63b21b55341f07a1a63002469e3b64521b19c99273621705f28165d74?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/626d42f63b21b55341f07a1a63002469e3b64521b19c99273621705f28165d74?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/626d42f63b21b55341f07a1a63002469e3b64521b19c99273621705f28165d74?s=96&d=mm&r=g\",\"caption\":\"Santiago Porras Rodr\u00edguez\"},\"description\":\"Innovation Team Leader at ENCAMINA | MVP in Developer Technologies. Apasionado por las nuevas tecnolog\u00edas. Colaboro con la comunidad de desarrolladores escribiendo art\u00edculos en mi blog personal y ocasionalmente en CompartiMOSS.com. Adem\u00e1s, soy uno de los coordinadores de TenerifeDev, grupo de usuarios de .NET de Tenerife y de otros grupos como Comunidad Office 365. Puedes encontrarme en la red microparticipando en Twitter con el usuario @saintwukong\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/saintwukong\"],\"url\":\"https:\\\/\\\/blogs.encamina.com\\\/piensa-en-software-desarrolla-en-colores\\\/author\\\/en-tu-casa-o-en-la-mia\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00bfC\u00f3mo usar Theming de JSS si estamos usando React.js? | ENCAMINA","description":"JSS es una herramienta que permite combinar JavaScript con CSS para poder escribir los estilos de forma declarativa, reutilizable, flexible, etc.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/","og_locale":"es_ES","og_type":"article","og_title":"\u00bfC\u00f3mo usar Theming de JSS si estamos usando React.js?","og_description":"JSS es una herramienta que permite combinar JavaScript con CSS para poder escribir los estilos de forma declarativa, reutilizable, flexible, etc.","og_url":"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/","og_site_name":"Piensa en software, desarrolla en colores","article_published_time":"2021-12-30T12:45:59+00:00","article_modified_time":"2021-12-30T12:51:18+00:00","og_image":[{"width":595,"height":407,"url":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2021\/12\/react.jpg","type":"image\/jpeg"}],"author":"Santiago Porras Rodr\u00edguez","twitter_card":"summary_large_image","twitter_creator":"@saintwukong","twitter_misc":{"Escrito por":"Santiago Porras Rodr\u00edguez","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/#article","isPartOf":{"@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-usar-theming-de-jss-si-estamos-usando-react-js\/"},"author":{"name":"Santiago Porras Rodr\u00edguez","@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#\/schema\/person\/c84cf613b7c5b8d5e1f7625a3e4c8c27"},"headline":"\u00bfC\u00f3mo usar Theming de JSS si estamos usando React.js?","datePublished":"2021-12-30T12:45:59+00:00","dateModified":"2021-12-30T12:51:18+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-usar-theming-de-jss-si-estamos-usando-react-js\/"},"wordCount":838,"commentCount":0,"image":{"@id":"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2021\/12\/react.jpg","articleSection":["ReactJS"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-usar-theming-de-jss-si-estamos-usando-react-js\/","url":"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/","name":"\u00bfC\u00f3mo usar Theming de JSS si estamos usando React.js? | ENCAMINA","isPartOf":{"@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/#primaryimage"},"image":{"@id":"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2021\/12\/react.jpg","datePublished":"2021-12-30T12:45:59+00:00","dateModified":"2021-12-30T12:51:18+00:00","author":{"@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#\/schema\/person\/c84cf613b7c5b8d5e1f7625a3e4c8c27"},"description":"JSS es una herramienta que permite combinar JavaScript con CSS para poder escribir los estilos de forma declarativa, reutilizable, flexible, etc.","inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/blog.santiagoporras.com\/react-js-theming-jss\/#primaryimage","url":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2021\/12\/react.jpg","contentUrl":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-content\/uploads\/sites\/21\/2021\/12\/react.jpg","width":595,"height":407},{"@type":"WebSite","@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#website","url":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/","name":"Piensa en software, desarrolla en colores","description":"Las ventajas que te ofrece Microsoft Azure y el mundo.NET","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/#\/schema\/person\/c84cf613b7c5b8d5e1f7625a3e4c8c27","name":"Santiago Porras Rodr\u00edguez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/626d42f63b21b55341f07a1a63002469e3b64521b19c99273621705f28165d74?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/626d42f63b21b55341f07a1a63002469e3b64521b19c99273621705f28165d74?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/626d42f63b21b55341f07a1a63002469e3b64521b19c99273621705f28165d74?s=96&d=mm&r=g","caption":"Santiago Porras Rodr\u00edguez"},"description":"Innovation Team Leader at ENCAMINA | MVP in Developer Technologies. Apasionado por las nuevas tecnolog\u00edas. Colaboro con la comunidad de desarrolladores escribiendo art\u00edculos en mi blog personal y ocasionalmente en CompartiMOSS.com. Adem\u00e1s, soy uno de los coordinadores de TenerifeDev, grupo de usuarios de .NET de Tenerife y de otros grupos como Comunidad Office 365. Puedes encontrarme en la red microparticipando en Twitter con el usuario @saintwukong","sameAs":["https:\/\/x.com\/saintwukong"],"url":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/author\/en-tu-casa-o-en-la-mia\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/posts\/1475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/comments?post=1475"}],"version-history":[{"count":0,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/posts\/1475\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/media\/1487"}],"wp:attachment":[{"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/media?parent=1475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/categories?post=1475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/wp-json\/wp\/v2\/tags?post=1475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}