Photo of Super Mushroom by GeekyShots, Unsplash

Up your React game with Views

How to try Views on an existing React project?

Darío Javier Cravero
Views Tools
Published in
2 min readJul 26, 2018

--

Pre-requisites: your project was created with create-react-app or create-react-native-app, you have version control

Why?

The biggest benefit of using Views in your React project is letting designers contribute to interface styling, so you can have more time to focus on your app’s logic. Yup, no hand-off is already possible and it’s your opportunity to stop loosing time on countless design iterations.

More benefits of using Views in your project 🤑

Commands to run from your app’s folder

# install use views globally
npm i -g @viewstools/use
# install views on it
use-views
# clean up
git checkout src/App.css
git checkout src/App.js
git checkout src/App.test.js
git checkout src/index.js
git checkout src/logo.svg
git checkout App.js
rm src/Main/App.view.logic.js

Note: If you don’t have the files for check out, ignore the errors, or don’t run the checkout commands.

How to use Views generated React components?

When Views Morpher compiles your .view files, it creates a .view.js file for each of them. For example, src/Main/App.view will be compiled to src/Main/App.view.js, if you want to use it in your own component, import it at the top of that file like import ViewsFeature from './Main/App.view.js' and use it like you would any other React component <ViewsFeature />.

This video shows the integration of Views with basic React app in under 1 min, Music: Ground Theme Composer: Koji Kondo

Subscribe here to be notified when the Views Tools beta is out (summer 2018). Join our Slack team to meet the contributors or ask #questions.

--

--

Darío Javier Cravero
Views Tools

Making Views Tools, a simple, fast way to design, build and change interfaces together https://views.tools