{"id":93,"date":"2019-02-02T11:41:07","date_gmt":"2019-02-02T10:41:07","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/02\/02\/react-export-guide%e2%80%8a-%e2%80%8astep-by-step-february-pilot-2019-version\/"},"modified":"2020-06-18T07:27:00","modified_gmt":"2020-06-18T07:27:00","slug":"react-export-guide%e2%80%8a-%e2%80%8astep-by-step-february-pilot-2019-version","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/react-export-guide%e2%80%8a-%e2%80%8astep-by-step-february-pilot-2019-version\/","title":{"rendered":"React Export Guide\u200a\u2014\u200aStep by Step (February Pilot 2019 version)"},"content":{"rendered":"
\n


\n<\/figure>\n

\n


\n<\/figure>\n

How to export to\u00a0React<\/h3>\n

Follow these instructions to the point and you\u2019ll be exporting to React code and components in super little time. We promise ?<\/p>\n

Adding things to export (Code\u00a0App)<\/h3>\n
    \n
  1. Open up our Code App<\/strong>. Make sure you have activated the React Export module by entering the license key that you receive upon signing up.<\/li>\n
  2. Go to File, Link Sketch-file<\/strong> (\u2318L)<\/li>\n
  3. Link to one of our demo files our your own<\/li>\n
  4. In our left sidebar menu click the Download<\/strong> icon. You should now see the React export option<\/strong> below HTML<\/li>\n
  5. Before anything can be exported to code, you need to add each artboard\/page to our export bundle.<\/strong> You do that by pressing Add to export<\/strong> (left side menu) on each and every page you want to be included in the export.<\/li>\n
  6. Press Download<\/strong> icon. If everything worked when activating you should see React<\/strong> below HTML.<\/li>\n
  7. Press React and save the\u00a0.zip somewhere locally on your computer.<\/li>\n<\/ol>\n

    Known issues<\/h4>\n

    Don\u2019t save to Dropbox, OneDrive or Google Drive.<\/strong> Once you begin installing all the packages that are included in our React export, these services will most likely crash\/hang. Or send you automated emails complaining you have to many files ?<\/p>\n

    This is because we use Create React App<\/a> (among other things) and it contains an amazingly amount of really small files. Size-wise we\u2019re talking about approx 220MB of downloaded packages.<\/p>\n

    iCloud<\/strong> seems to be working fine with these many small files, no crash so far and the syncing seems to be working great between computers linked to the same Apple ID.<\/p>\n

    ?\ufe0f Cool, now let\u2019s move on to the really exciting part\u2026<\/em><\/p>\n

    Now comes a couple of steps that first can seem very odd and very unfamiliar. Specially if you have never installed thingies via the Terminal. We have streamlined this as much as we can but hey, this is a real design to code environment, you can\u2019t cheat your way through this ?<\/p>\n

    ?\ufe0f Node.js<\/h3>\n

    For anything to work you first need to install Node.js<\/strong>.<\/p>\n