{"id":49,"date":"2019-10-24T08:32:52","date_gmt":"2019-10-24T06:32:52","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/10\/24\/getting-started-with-sketch2react\/"},"modified":"2020-11-29T17:38:59","modified_gmt":"2020-11-29T16:38:59","slug":"getting-started-with-sketch2react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/","title":{"rendered":"Getting started with Sketch2React"},"content":{"rendered":"<figure>\n<p class=\"\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png\" data-width=\"1600\" data-height=\"900\"><\/p>\n<\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<p>We know how it can be when learning something new. <em>Overwhelming<\/em>. Where to start?<\/p>\n<p><strong>Fear not\u200a\u2014\u200awe\u2019re here to help! <\/strong>We have introduced Sketch2React to many people during our approx <em>20 months of existence<\/em>. Everything here is based on insights &amp; feedback from those sessions.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure>\n<p class=\"\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*mzfkBF4kGTgvHD_Cvuv3WQ.png\" data-width=\"1920\" data-height=\"1080\"><\/p>\n<\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<h3>What is Sketch2React?<\/h3>\n<p>Sketch2React is a tool and a framework that lets you <strong>build React powered websites &amp; components straight from inside Sketch<\/strong>. Without plugins and only using built-in tools in Sketch. ??<\/p>\n<p>In that we are totally unique\u200a\u2014\u200athere is no single tool out there that does this. You never leave Sketch and you don\u2019t rely on third party plugins that (<em>sometimes<\/em>) causes conflicts. ?<\/p>\n<h3>Mac only<\/h3>\n<p>Sketch2React is at the moment a <strong>Mac-only design to code development environment<\/strong>. Of course, your exported code can be used anywhere so technically you can also work together with developers using Windows. But all the building and designing is done inside of <a href=\"https:\/\/www.sketch.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch app<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure class=\"wp-caption\">\n<p class=\"\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*zWzMFJFQNBmY1nNPApC8tQ.jpeg\" data-width=\"800\" data-height=\"800\"><\/p><figcaption class=\"wp-caption-text\">You can guess by the amount of stickers who does what&nbsp;??<\/figcaption><\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<h3 class=\"\">About Team Sketch2React<\/h3>\n<p class=\"\">We&#8217;re a small team consisting of Fredrik Ward (developer) and Juan Maguid (designer).<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row bg-editor-hr-wrap\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<div class=\"row bg-editor-hr-wrap\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<hr>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*zgpM0ke7GVTEVZSFpbr1Pw.png\" data-width=\"1920\" data-height=\"1080\"><\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<h3>In Sketch app&nbsp;you:<\/h3>\n<ul>\n<li>Build and design with <a href=\"https:\/\/sketch2react.gitbook.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">code components<\/a> that you style &amp; apply simple business logic<\/li>\n<li>Layout &amp; structure with our <a href=\"https:\/\/sketch2react.gitbook.io\/sketch2react-io\/learn\/cheat-sheet\" target=\"_blank\" rel=\"noopener noreferrer\">framework rules<\/a><\/li>\n<\/ul>\n<p class=\"\"><strong>ProTip:<\/strong> Start by using our very simple pre-made <a href=\"https:\/\/sketch.cloud\/s\/GybzO\" target=\"_blank\" rel=\"noopener noreferrer\">S2R Sketch Shared Library<\/a> to get a great start. To restyle them just <strong>unlink from library<\/strong> and go wild ? ?&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure>\n<p class=\"\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*OuN0TKVGwNP-bHPFM6isFA.png\" data-width=\"1920\" data-height=\"1080\"><\/p>\n<\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<h3 id=\"insketch2react2020you:\" class=\"\">In Sketch2React 2020 you:<\/h3>\n<ul class=\"\">\n<li>View in real-time what you are doing in Sketch<\/li>\n<li>Export to code (React or HTML)<\/li>\n<li>After export you get a <strong>React project <\/strong>based on Create React App or a HTML5 project.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<figure class=\"wp-caption\">\n<p class=\"\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*9p0UcSsvvUp8XbiPTmccmw.png\" data-width=\"1920\" data-height=\"1080\"><\/p><figcaption class=\"wp-caption-text\">Sceptic? ?Find out how our<\/p>\n<p class=\"mod-reset\"><a href=\"https:\/\/medium.com\/sketch2react\/sketch2react-code-review-simple-button-de71bd940152\" target=\"_blank\" rel=\"noopener noreferrer\">code export looks<\/a><\/p>\n<p>&nbsp;?<\/figcaption><\/figure>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<h3>Install all of these&nbsp;first<\/h3>\n<ul class=\"\">\n<li>Sketch app 68+ plus our <a href=\"https:\/\/www.sketch.com\/extensions\/assistants\/@sketch2react\/sketch2react-assistant\/\">assistant<\/a><\/li>\n<li>Sketch2React 2020, <a href=\"https:\/\/marketplace.sketch2react.io\/product\/sketch2react\/\">purchase it here<\/a><\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js &amp; npm<\/a><\/li>\n<li>Code editor, we prefer the awesome free <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a><\/li>\n<\/ul>\n<p>That\u2019s it! You are now ready to start building and designing React websites directly inside of Sketch!<\/p>\n<h3 class=\"\">What to do&nbsp;next?<\/h3>\n<ul class=\"\">\n<li>Start by doing these <a href=\"https:\/\/www.youtube.com\/watch?v=Q1jKB5CMngY&amp;list=PLlXDF4NEE6YkzKp-TMwg_OymK5o_-B9gE\" target=\"_blank\" rel=\"noopener noreferrer\">5 very simple<\/a> and very short video tutorials<\/li>\n<li>Read our short updated <a href=\"https:\/\/sketch2react.gitbook.io\/sketch2react-io\/learn\/cheat-sheet\" target=\"_blank\" rel=\"noopener noreferrer\">Quick Guide<\/a> ?<\/li>\n<li>Download &amp; study a couple of our <a href=\"https:\/\/sketch2react.io\/resources.php\" target=\"_blank\" rel=\"noopener noreferrer\">free demo files<\/a> containing lots of ready components<\/li>\n<li>We have a <a href=\"https:\/\/sketch2react.io\/docs\/tutorials.php\" target=\"_blank\" rel=\"noopener noreferrer\">massive amount of free tutorials<\/a>, most of them are under 10 minutes long<\/li>\n<li>Read our <a href=\"https:\/\/medium.com\/sketch2react\" target=\"_blank\" rel=\"noopener noreferrer\">blog<\/a>, it actually contains useful reads ??<\/li>\n<li>If you want to ask us any questions, the best thing is to <a href=\"https:\/\/join.slack.com\/t\/sketch2react\/shared_invite\/enQtNTM0MDUzOTIzODI1LTk2ZWQ2NmE4ZDliNDJlZmVjMThjMDlmMTI2ODdjYTU3MDQzZDJhOWNjOGJlNzZlNzRiODIyODY1OTY2YzIzZTQ\" target=\"_blank\" rel=\"noopener noreferrer\">join our Slack community<\/a>, just promise to be nice ?<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row bg-editor-hr-wrap\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<div class=\"row bg-editor-hr-wrap\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<hr>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<p>All the best ?<br \/>\n<em>Juan, Team Sketch2React<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>We know how it can be when learning something new. Overwhelming. Where to start? Fear not\u200a\u2014\u200awe\u2019re here to help! We have introduced Sketch2React to many people during our approx 20 months of existence. Everything here is based on insights &amp; feedback from those sessions. What is Sketch2React? Sketch2React is a tool and a framework that&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Getting started with Sketch2React<\/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":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","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":[168],"tags":[29,118,63,18,55],"class_list":["post-49","post","type-post","status-publish","format-standard","hentry","category-miscellaneous","tag-design","tag-design-to-code","tag-reactjs","tag-sketch-app","tag-sketch2react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Getting started with Sketch2React | 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\/getting-started-with-sketch2react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting started with Sketch2React - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"We know how it can be when learning something new. Overwhelming. Where to start? Fear not\u200a\u2014\u200awe\u2019re here to help! We have introduced Sketch2React to many people during our approx 20 months of existence. Everything here is based on insights &amp; feedback from those sessions. What is Sketch2React? Sketch2React is a tool and a framework that&hellip;&nbsp;Read More &raquo;Getting started with Sketch2React\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-24T06:32:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-29T16:38:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Getting started with Sketch2React\",\"datePublished\":\"2019-10-24T06:32:52+00:00\",\"dateModified\":\"2020-11-29T16:38:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/\"},\"wordCount\":431,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png\",\"keywords\":[\"Design\",\"Design To Code\",\"Reactjs\",\"Sketch App\",\"Sketch2react\"],\"articleSection\":[\"Miscellaneous\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/\",\"name\":\"Getting started with Sketch2React - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png\",\"datePublished\":\"2019-10-24T06:32:52+00:00\",\"dateModified\":\"2020-11-29T16:38:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting started with Sketch2React\"}]},{\"@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":"Getting started with Sketch2React | 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\/getting-started-with-sketch2react\/","og_locale":"en_US","og_type":"article","og_title":"Getting started with Sketch2React - Sketch2React Blog","og_description":"We know how it can be when learning something new. Overwhelming. Where to start? Fear not\u200a\u2014\u200awe\u2019re here to help! We have introduced Sketch2React to many people during our approx 20 months of existence. Everything here is based on insights &amp; feedback from those sessions. What is Sketch2React? Sketch2React is a tool and a framework that&hellip;&nbsp;Read More &raquo;Getting started with Sketch2React","og_url":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-10-24T06:32:52+00:00","article_modified_time":"2020-11-29T16:38:59+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Getting started with Sketch2React","datePublished":"2019-10-24T06:32:52+00:00","dateModified":"2020-11-29T16:38:59+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/"},"wordCount":431,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png","keywords":["Design","Design To Code","Reactjs","Sketch App","Sketch2react"],"articleSection":["Miscellaneous"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/","url":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/","name":"Getting started with Sketch2React - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png","datePublished":"2019-10-24T06:32:52+00:00","dateModified":"2020-11-29T16:38:59+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/2560\/1*WjzRmC8bDiEWUozd23Ss8g.png"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/getting-started-with-sketch2react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting started with Sketch2React"}]},{"@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\/49","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=49"}],"version-history":[{"count":4,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":695,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions\/695"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}