Photo of Super Mushroom by GeekyShots, Unsplash

Up your React game with Views

How to try Views on an existing React project?

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


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 views on it
# 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.

Views Tools

Find product market fit before you run out of money

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store