Need to show working code during your pitch? Always wanted to make your ? Want to impress your dev friends?

Level: Absolute beginner
System: Mac
Setup time: 10 min
Outcome: Production-ready code
Dev skills: Optional — follow my steps

If you ever wanted to build what you design you will enjoy this process — it’s simple, requires no previous technical knowledge, and the interface you design becomes the real app.

If you don’t know anything about development, JavaScript, servers, etc, don’t worry, I’m a designer too, and I can easily follow the steps below.

You will still need a developer to add business logic and connect flows, but at least you can start and own the interface design.

We call this workflow Continuous Design because there is no hand-off involved and you can keep on improving the same experience your users have, without going back to prototyping or going through painful development revision cycles.

You will have full control of the UI, and once you do, you won’t be able to live without it!

The full process has two phases:

  • Stuff you have to do once => setup development environment on your computer (if you already don’t have it?)
  • Stuff you have to do every time you want to start a new project

Phase 1. Setup dev environment

Setup React dev environment in under 1 min

#1 In AppStore

#2 In Terminal

  • Go to Applications / Utilities and open
  • Go here and run all the commands, one after the other following the order
  • Well done! Now you can move on the the Phase 2

Phase 2. new React DOM (Web) project

create-react-app + Views + GitHub, under 2 min; From JPG to code, under 5 min

#1 In Terminal

  • Go to Applications / Utilities and open
  • Write cd followed by space
  • Open Finder and drag the folder you want your project to be located in
  • Press Return to confirm directory you want to change to
  • paste create-react-app followed by space and your desired project name (all together, or use dashes “-” to separate words)
  • Write cd followed by space and type first couple letters of your project name you used in the previous step, then, press Tab key. The name will be auto-filled for you. Press Return to confirm
  • Copy and paste use-views command. Run with Return

#2 In GitHub

  • Go to and sign up. It’s a free version control software
  • Click on the plus next to your avatar to create a new repository. Once done you will get the list of commands to run in your project folder in the Terminal app
  • Copy, paste, and run with Return these commands one by one
  • git init
  • git add .
  • git commit -am"initial"
  • git remote add origin [email protected]: followed by your GitHub username and name of the repository you’ve set up before, you can copy this command from the screen that came up after creating the repo
  • git push -u origin master

#3 Back to Terminal to start your app

  • To see your app working in the browser as it would for your user’s copy, paste yarn start, and run with Return

At this point, you already have your React app created and running. Now, you can either learn React or use Views Tools, the app I’m using at the end of the video above. You can join our Slack team to get updates on the launch date.

If you have Views Tools

  • When you get the beta build, install it like any other app
  • Go to Project menu, select open, and navigate to the project folder of your React app. Hit Open.
  • Go to File menu, add New view, and Save it directly in the src folder or in a subfolder

You are now ready to make beautiful, animated, and ready to be shipped interfaces. Here are the docs and the list of selected tutorials:

This simple tools creates React components for you 
How to prototype in production?
S01E01: React state preview
S01E02: Predictive coding
S01E03: when animations
S01E04: Drag and drop

Subscribe here to be notified when the Views Tools beta is out (summer 2018). Join our Slack team to meet the contributors. Follow me on Twitter not to miss news about new alternatives to the hand-off process. Also, clapping 👏 lets me know that you have enjoyed reading this post and allows others to see it too.

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here