{"id":95,"date":"2019-02-07T08:32:35","date_gmt":"2019-02-07T07:32:35","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/02\/07\/how-to-export-to-react\/"},"modified":"2020-06-18T07:27:00","modified_gmt":"2020-06-18T07:27:00","slug":"how-to-export-to-react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/","title":{"rendered":"How to export to React"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg\"><br \/>\n<\/figure>\n<h4>Be prepared for what\u2019s\u00a0coming!<\/h4>\n<p>Since we\u2019re close to releasing <strong>true React export to the public<\/strong> here are two really good tutorials that goes through all the steps necessary to get your <strong>React app designs<\/strong> ready for deployment and further development.<\/p>\n<p><strong>Happiness!<\/strong><\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"64\" data-height=\"64\" src=\"https:\/\/cdn-images-1.medium.com\/max\/600\/0*wOBRIxasick3-qGG\"><br \/>\n<\/figure>\n<h3>Start with this one\u200a\u2014\u200aBasics!<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"React Export Tutorials - Complete\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/MqF7fJ1XGMs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h3>And later, when you feel \u201cdamn this is easy\u201d you do this\u00a0one<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - React Navigation with React Router\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/fp6RYhMvPmQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Be prepared for what\u2019s\u00a0coming! Since we\u2019re close to releasing true React export to the public here are two really good tutorials that goes through all the steps necessary to get your React app designs ready for deployment and further development. Happiness! Start with this one\u200a\u2014\u200aBasics! And later, when you feel \u201cdamn this is easy\u201d you&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to export to React<\/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":[83,63,18,9],"class_list":["post-95","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-export","tag-reactjs","tag-sketch-app","tag-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to export to React | 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-export-to-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to export to React - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Be prepared for what\u2019s\u00a0coming! Since we\u2019re close to releasing true React export to the public here are two really good tutorials that goes through all the steps necessary to get your React app designs ready for deployment and further development. Happiness! Start with this one\u200a\u2014\u200aBasics! And later, when you feel \u201cdamn this is easy\u201d you&hellip;&nbsp;Read More &raquo;How to export to React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-07T07:32:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:27:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg\" \/>\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<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to export to React\",\"datePublished\":\"2019-02-07T07:32:35+00:00\",\"dateModified\":\"2020-06-18T07:27:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/\"},\"wordCount\":82,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg\",\"keywords\":[\"Export\",\"Reactjs\",\"Sketch App\",\"Tutorial\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/\",\"name\":\"How to export to React - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg\",\"datePublished\":\"2019-02-07T07:32:35+00:00\",\"dateModified\":\"2020-06-18T07:27:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to export to React\"}]},{\"@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 export to React | 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-export-to-react\/","og_locale":"en_US","og_type":"article","og_title":"How to export to React - Sketch2React Blog","og_description":"Be prepared for what\u2019s\u00a0coming! Since we\u2019re close to releasing true React export to the public here are two really good tutorials that goes through all the steps necessary to get your React app designs ready for deployment and further development. Happiness! Start with this one\u200a\u2014\u200aBasics! And later, when you feel \u201cdamn this is easy\u201d you&hellip;&nbsp;Read More &raquo;How to export to React","og_url":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-02-07T07:32:35+00:00","article_modified_time":"2020-06-18T07:27:00+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to export to React","datePublished":"2019-02-07T07:32:35+00:00","dateModified":"2020-06-18T07:27:00+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/"},"wordCount":82,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg","keywords":["Export","Reactjs","Sketch App","Tutorial"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/","url":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/","name":"How to export to React - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg","datePublished":"2019-02-07T07:32:35+00:00","dateModified":"2020-06-18T07:27:00+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BiEX6iSOu-nSG5tpojLLYQ.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-export-to-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to export to React"}]},{"@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\/95","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=95"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/95\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/95\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=95"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=95"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=95"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}