{"id":34,"date":"2019-10-18T16:10:45","date_gmt":"2019-10-18T14:10:45","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/10\/18\/sketch2react-code-review%e2%80%8a-%e2%80%8asimple-button\/"},"modified":"2020-08-31T09:13:23","modified_gmt":"2020-08-31T07:13:23","slug":"sketch2react-code-review%e2%80%8a-%e2%80%8asimple-button","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/sketch2react-code-review%e2%80%8a-%e2%80%8asimple-button\/","title":{"rendered":"Sketch2React Code Review\u200a\u2014\u200aSimple Button"},"content":{"rendered":"
\n

<\/p>\n<\/figure>\n

\n
\n
\n
\n

We have since the very start of our framework had a very designer focused explanation<\/strong> about the what, the how and so on.<\/p>\n

The more advanced our framework and code app gets we have, after feedback from you guys, realized we need to shift focus a bit.<\/p>\n

Or at least talk more about the actual code output<\/strong>. So here we go ??<\/p>\n

Is it crappy code?<\/h3>\n

First of all let\u2019s talk about the elephant in the room<\/strong>. The one question every good designers and developer thinks when hearing the words \u201cgenerated code\u201d:<\/p>\n

    \n
  • Is it crap ??<\/li>\n
  • Is it spaghetti ? code?<\/li>\n<\/ul>\n

    Short answer<\/h3>\n

    Nope ??<\/p>\n

    We are extremely proud of our output, we think it\u2019s great given the fact that:<\/p>\n

      \n
    • You code with easy to learn snippets directly inside of Sketch<\/li>\n
    • You have 100% control of our generated code after export<\/strong>, there is no hocus-pocus hidden things, everything is based on proven web tech (HTML, CSS, Javascript, Bootstrap, Create React App)<\/li>\n
    • Actual real people<\/strong> (no fake marketing scheme here<\/em>) have said things like \u201dIt produces clean, almost hand-tooled HTML code with external CSSs and JSs<\/em>\u201d<\/li>\n<\/ul>\n

      Also ? What is the purpose of spending endless amounts of hours developing something that outputs crap? None my friends. But don\u2019t take our word for it, it is only you that can judge with your own set of perspectives on what is great or trash. On to the next level then. ? ?<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

      \n
      \n
      \n
      \n
      \n
      \n
      \n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
      \n
      \n
      \n
      \n

      The next level of scrutiny<\/h3>\n

      Here we prefer to actually show you what it exactly looks like. So here\u2019s an example done ? % inside of Sketch and exported to code via our code app. No overhead done after export, no special add-ons.<\/p>\n

      This walkthrough is based on the latest version of Sketch2React<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

      \n
      \n
      \n
      \n
      \n
      \n
      \n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
      \n

      <\/p>

      Let\u2019s look at this beaut shall we?<\/figcaption><\/figure>\n
      \n
      \n
      \n
      \n

      Simple Button<\/h3>\n

      Let\u2019s start really simple with one of my personal favourite components\u200a\u2014\u200athe button! Oh how versatile you are my old friend ? ?<\/p>\n

      Lets look inside of Sketch?<\/h4>\n

      First let\u2019s look in Sketch app how this component is structured. Remember, all of this is done 100% inside of Sketch without plugins<\/strong>, just using the built-in tools like text tool, rectangle tool etc.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

      \n

      <\/p>

      All of our components that have interactivity needs to be turned into Symbols first<\/figcaption><\/figure>\n
      \u2026and this is how the symbol is structured<\/figcaption><\/figure>\n
      \n
      \n
      \n
      \n

      Let\u2019s export this to code!<\/h3>\n

      Our HTML export<\/strong> (Download?HTML) bundles everything you have added inside of Sketch, according to our framework rules, plus all external files. An example is, if you have created your very own CSS plugin it also bundles it, into a nice little neat .zip file. ?<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

      This is what gets exported in our HTML export\u200a\u2014\u200ajust drag and drop onto server and your good to go <\/p>\n

      ?<\/p>\n<\/figcaption><\/figure>\n

      \n
      \n
      \n
      \n

      Simple Button\u200a\u2014\u200aHTML Export<\/h3>\n