{"id":39,"date":"2019-11-29T15:52:25","date_gmt":"2019-11-29T14:52:25","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/11\/29\/how-to-create-custom-react-components-in-stratos\/"},"modified":"2020-06-18T07:26:58","modified_gmt":"2020-06-18T07:26:58","slug":"how-to-create-custom-react-components-in-stratos","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/","title":{"rendered":"How to create custom React components in Stratos"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"3840\" data-height=\"2160\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png\"><br \/>\n<\/figure>\n<p>Hey guys, this is a special day! First it\u2019s Black Friday Yay, lots of great deals out there, even we <a href=\"https:\/\/sketch2react.io\" target=\"_blank\" rel=\"noopener noreferrer\">couldn\u2019t resist<\/a>. But let\u2019s not worry about consumerism right now, lets do one in the spirit of teaching and learning new great things.<\/p>\n<p>In below tutorial <a href=\"https:\/\/medium.com\/u\/ec576ed42c01\" target=\"_blank\" rel=\"noopener noreferrer\">Fredrik Ward<\/a> shows you guys how to create your custom React components in the upcoming Alpha 1 of Stratos. He shows you how you can add the amazing free animation library from the makers of Framer X, Framer Motion.<\/p>\n<h3>What you will\u00a0learn<\/h3>\n<ul>\n<li>How to add your own custom React components<\/li>\n<li>How to use Framer Motion with Stratos<\/li>\n<li>How to install the React Server that needs to be running in the background<\/li>\n<li>A bit of React code ??<\/li>\n<\/ul>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"How to add Custom Made React Components to Stratos\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/IiaMvvvsdJo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hey guys, this is a special day! First it\u2019s Black Friday Yay, lots of great deals out there, even we couldn\u2019t resist. But let\u2019s not worry about consumerism right now, lets do one in the spirit of teaching and learning new great things. In below tutorial Fredrik Ward shows you guys how to create your&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to create custom React components in Stratos<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[115,59,63,55,116],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-framer-motion","tag-react","tag-reactjs","tag-sketch2react","tag-stratosapp"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create custom React components in Stratos | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create custom React components in Stratos - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Hey guys, this is a special day! First it\u2019s Black Friday Yay, lots of great deals out there, even we couldn\u2019t resist. But let\u2019s not worry about consumerism right now, lets do one in the spirit of teaching and learning new great things. In below tutorial Fredrik Ward shows you guys how to create your&hellip;&nbsp;Read More &raquo;How to create custom React components in Stratos\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-29T14:52:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:26:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to create custom React components in Stratos\",\"datePublished\":\"2019-11-29T14:52:25+00:00\",\"dateModified\":\"2020-06-18T07:26:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/\"},\"wordCount\":139,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png\",\"keywords\":[\"Framer Motion\",\"React\",\"Reactjs\",\"Sketch2react\",\"Stratosapp\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/\",\"name\":\"How to create custom React components in Stratos - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png\",\"datePublished\":\"2019-11-29T14:52:25+00:00\",\"dateModified\":\"2020-06-18T07:26:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create custom React components in Stratos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create custom React components in Stratos | Sketch2React Blog","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:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/","og_locale":"en_US","og_type":"article","og_title":"How to create custom React components in Stratos - Sketch2React Blog","og_description":"Hey guys, this is a special day! First it\u2019s Black Friday Yay, lots of great deals out there, even we couldn\u2019t resist. But let\u2019s not worry about consumerism right now, lets do one in the spirit of teaching and learning new great things. In below tutorial Fredrik Ward shows you guys how to create your&hellip;&nbsp;Read More &raquo;How to create custom React components in Stratos","og_url":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-11-29T14:52:25+00:00","article_modified_time":"2020-06-18T07:26:58+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to create custom React components in Stratos","datePublished":"2019-11-29T14:52:25+00:00","dateModified":"2020-06-18T07:26:58+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/"},"wordCount":139,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png","keywords":["Framer Motion","React","Reactjs","Sketch2react","Stratosapp"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/","url":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/","name":"How to create custom React components in Stratos - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png","datePublished":"2019-11-29T14:52:25+00:00","dateModified":"2020-06-18T07:26:58+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*O9oaVF2mgJsySXt2dKPRtA@2x.png"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-create-custom-react-components-in-stratos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create custom React components in Stratos"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":315,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/39\/revisions\/315"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}