{"id":33,"date":"2019-04-29T17:00:49","date_gmt":"2019-04-29T15:00:49","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/04\/29\/learn-sketch2react-from-scratch\/"},"modified":"2020-06-18T07:27:00","modified_gmt":"2020-06-18T07:27:00","slug":"learn-sketch2react-from-scratch","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/","title":{"rendered":"Learn Sketch2React \u2013 From scratch"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg\"><br \/>\n<\/figure>\n<p><a href=\"https:\/\/link.medium.com\/LAZPea6SLW\">https:\/\/link.medium.com\/LAZPea6SLW<\/a><\/p>\n<hr>\n<h3>Learn Sketch2React \u2013 From\u00a0scratch<\/h3>\n<p>We are all children in the beginning when learning new things. Take myself as an example. I have been learning how to drive a car for about a year now. At first I was terrified. <em>\u201dWhat if I kill someone?\u201d<\/em> You\u2019re actually sitting in a moving death machine if handled wrong, and without respect and alertness things can go really really wrong. <em>\u201dI will never ever learn how to drive a frakking car!\u200a\u2014\u200aWhere are those self-driving cars anyway?\u201d<\/em>. Yup.<\/p>\n<p>Thing is, the only approach I have ever known to work for me is just to jump straight in and learn as you go. In small steps. One thing at a time. And realize you will never ever learn anything completely, this is a life long journey my friends.<\/p>\n<p>Thankfully learning <a href=\"https:\/\/sketch2react.io\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React<\/a> is waaaaaay easier than learning how to drive.<\/p>\n<p>This is a guide on how to get started. These video tutorials are short and concise and you\u2019ll have a <strong>very good understanding in just over 20 minutes<\/strong> on the very basics of our design to code framework. We will continue to release a couple of more beginner tutorials in the months to come.<\/p>\n<p>Anyway, big chances are, you already have a great grasp of Sketch since you found us in the first place and bothered even reading this far down in this article. ?\u270a<\/p>\n<hr>\n<h3>Step 1\u200a\u2014\u200aSign\u00a0up<\/h3>\n<p>If you are 100% new to this, first of all you need to <a href=\"https:\/\/sketch2react.io\" target=\"_blank\" rel=\"noopener noreferrer\">sign up on our website<\/a> to get all of our relevant files, apps etc. Once you sign up you\u2019ll get an automated email with a big fat download button. Press it. Dooooo it now. Yes.<\/p>\n<p>To make sure you get our automated email <strong>please whitelist<\/strong> <em>feedback at sketch2react dot io<\/em> in your preferred email application.<\/p>\n<hr>\n<h3>Step 2\u200a\u2014\u200aWatch these tutorials<\/h3>\n<p>We have created a very basic tutorial series for people that are totally new to this.<\/p>\n<h4>Tutorial System Requirements<\/h4>\n<ul>\n<li>Sketch App v52\u2013<\/li>\n<li>Sketch2React Code App v0.7.2<\/li>\n<li>Fonts: <a href=\"https:\/\/fonts.google.com\/specimen\/Poppins\" target=\"_blank\" rel=\"noopener noreferrer\">Poppins<\/a> &amp; Ion Icons (installed via free plugin <a href=\"https:\/\/github.com\/keremciu\/sketch-iconfont\" target=\"_blank\" rel=\"noopener noreferrer\">Icon Font<\/a>)<\/li>\n<li>Sketch2React know-how: 0% ?<\/li>\n<\/ul>\n<h3>Part 1\u200a\u2014\u200aCreate your very first code component in\u00a0Sketch<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Beginner Tutorial Part 1 - Create your first code component\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/Q1jKB5CMngY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p>In part 1 of our <strong>Start from Zero with Sketch2React<\/strong> you\u2019ll learn how to things need to be setup inside of Sketch for this to even begin to work. You\u2019ll also create your very first code component from scratch! ? ?<\/p>\n<h3>Part 2\u200a\u2014\u200aLearn how to create a container and use margins to add\u00a0padding<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Beginner Tutorial Part 2 - Containers &amp; Margins\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/lzJ5YSkpVdI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p>In part 2 you\u2019ll learn how to create a <strong>{container}<\/strong> and see how that affects your components. Also we show you how to use <strong>margins<\/strong>, an excellent way of getting spacing between component objects in your layouts.<\/p>\n<p>?\u2705 <a href=\"https:\/\/www.dropbox.com\/s\/z0br4cyovzzpbpl\/Beginner%20Tutorial%20Part%202.sketch?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">Download Tutorial file here\u2026<\/a><\/p>\n<h4><strong>Clarification<\/strong><\/h4>\n<p>This tutorial contains two button components, we just copied them from one of our <a href=\"https:\/\/sketch2react.io\/resources.php\" target=\"_blank\" rel=\"noopener noreferrer\">free demo files<\/a>, and restyled them. Do the same. How to create a button component from scratch is irrelevant at this moment, you need first to learn the basics.<\/p>\n<h3>Part 3\u200a\u2014\u200aColumns and rows, essential to web\u00a0design<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Beginner Tutorial Part 3 - Columns &amp; Rows\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/4rF7RA3KR1s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p>In part 3 you\u2019ll learn how to create columns and rows, this is great for layout and creating more complex components.<\/p>\n<p>?\u2705 <a href=\"https:\/\/www.dropbox.com\/s\/rzpw1a0sgh8dw8h\/Beginner%20Tutorial%20Part%203.sketch?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">Download Tutorial file here\u2026<\/a><\/p>\n<h3>Part 4\u200a\u2014\u200aHow to add\u00a0images<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Beginner Tutorial Part 4 - How to add images\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/mvgm8kVUhtA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p>In part 4 you\u2019ll learn about the difference between <strong>{image}<\/strong> and <strong>{image-fixed}<\/strong>. Also, every time you add a new image, you need to relink the\u00a0.sketchfile to our code app for it to show up in code.<\/p>\n<p>?\u2705 <a href=\"https:\/\/www.dropbox.com\/s\/kzjwmgxi10wj0th\/Beginner%20Tutorial%20Part%204.sketch?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">Download Tutorial file here\u2026<\/a><\/p>\n<h3>Part 5\u200a\u2014\u200aHow to convert our components to\u00a0symbols<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Beginner Tutorial Part 5 - Working with Symbols\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/V64C-lrrC24?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p>In part 5 you\u2019ll learn the extremely valuable lesson of converting your Sketch2React components into Sketch symbols. We all know that symbols is the best things since cupcakes but when they also are real code components I run out of positive adjectives to use. ??<\/p>\n<p>?\u2705 <a href=\"https:\/\/www.dropbox.com\/s\/bc0nqe40k9m3382\/Beginner%20Tutorial%20Part%205%20-%20Symbols.sketch?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\">Download Tutorial file here\u2026<\/a><\/p>\n<hr>\n<h3>Summary<\/h3>\n<p>Yes! After you have done all of the above tutorials you will have a very good grasp of what you can do with our <strong>free design to code component framework<\/strong>. Please feel free to download any of our free resources and study them for learning how to create more advanced web design thingies directly from inside of Sketch.<\/p>\n<p>You been good, go celebrate your new learnings now ???\u200d?<\/p>\n<p>And actually this might just happen:<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">One of the best things about <a href=\"https:\/\/twitter.com\/hashtag\/designing?src=hash&amp;ref_src=twsrc%5Etfw\">#designing<\/a> with real <a href=\"https:\/\/twitter.com\/hashtag\/code?src=hash&amp;ref_src=twsrc%5Etfw\">#code<\/a> is that no one can ever tell you &quot;that&#39;s not possible&quot; Well dude, I just solved it for you ??<a href=\"https:\/\/twitter.com\/hashtag\/sketch2react?src=hash&amp;ref_src=twsrc%5Etfw\">#sketch2react<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/html?src=hash&amp;ref_src=twsrc%5Etfw\">#html<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/react?src=hash&amp;ref_src=twsrc%5Etfw\">#react<\/a><\/p>\n<p>&mdash; Juan Maguid (@juand4v) <a href=\"https:\/\/twitter.com\/juand4v\/status\/1125344376115335169?ref_src=twsrc%5Etfw\">May 6, 2019<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>?<\/p>\n<p>\/\/<em>Juan from Team Sketch2React\/Designforventures<\/em><\/p>\n<p><a href=\"https:\/\/link.medium.com\/LAZPea6SLW\">https:\/\/link.medium.com\/LAZPea6SLW<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn Sketch2React \u2013 From\u00a0scratch We are all children in the beginning when learning new things. Take myself as an example. I have been learning how to drive a car for about a year now. At first I was terrified. \u201dWhat if I kill someone?\u201d You\u2019re actually sitting in a moving death machine if handled wrong,&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Learn Sketch2React \u2013 From scratch<\/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":[100,29,63,101,9],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-beginner","tag-design","tag-reactjs","tag-single-page-applications","tag-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Learn Sketch2React \u2013 From scratch | 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\/learn-sketch2react-from-scratch\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn Sketch2React \u2013 From scratch - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Learn Sketch2React \u2013 From\u00a0scratch We are all children in the beginning when learning new things. Take myself as an example. I have been learning how to drive a car for about a year now. At first I was terrified. \u201dWhat if I kill someone?\u201d You\u2019re actually sitting in a moving death machine if handled wrong,&hellip;&nbsp;Read More &raquo;Learn Sketch2React \u2013 From scratch\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-29T15:00:49+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*w3oEL-jheLg8xnlRj6z-8w.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\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Learn Sketch2React \u2013 From scratch\",\"datePublished\":\"2019-04-29T15:00:49+00:00\",\"dateModified\":\"2020-06-18T07:27:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/\"},\"wordCount\":780,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg\",\"keywords\":[\"Beginner\",\"Design\",\"Reactjs\",\"Single Page Applications\",\"Tutorial\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/\",\"name\":\"Learn Sketch2React \u2013 From scratch - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg\",\"datePublished\":\"2019-04-29T15:00:49+00:00\",\"dateModified\":\"2020-06-18T07:27:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Learn Sketch2React \u2013 From scratch\"}]},{\"@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":"Learn Sketch2React \u2013 From scratch | 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\/learn-sketch2react-from-scratch\/","og_locale":"en_US","og_type":"article","og_title":"Learn Sketch2React \u2013 From scratch - Sketch2React Blog","og_description":"Learn Sketch2React \u2013 From\u00a0scratch We are all children in the beginning when learning new things. Take myself as an example. I have been learning how to drive a car for about a year now. At first I was terrified. \u201dWhat if I kill someone?\u201d You\u2019re actually sitting in a moving death machine if handled wrong,&hellip;&nbsp;Read More &raquo;Learn Sketch2React \u2013 From scratch","og_url":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-04-29T15:00:49+00:00","article_modified_time":"2020-06-18T07:27:00+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Learn Sketch2React \u2013 From scratch","datePublished":"2019-04-29T15:00:49+00:00","dateModified":"2020-06-18T07:27:00+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/"},"wordCount":780,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg","keywords":["Beginner","Design","Reactjs","Single Page Applications","Tutorial"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/","url":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/","name":"Learn Sketch2React \u2013 From scratch - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg","datePublished":"2019-04-29T15:00:49+00:00","dateModified":"2020-06-18T07:27:00+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*w3oEL-jheLg8xnlRj6z-8w.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/learn-sketch2react-from-scratch\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Learn Sketch2React \u2013 From scratch"}]},{"@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\/33","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=33"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/33\/revisions\/328"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}