Over the years I have followed these steps when designing widgets, plugins, and features. In this example, I will outline the steps to code a To-Do app in react.js, vue.js, React native, and Angular.
Step1: Start with mock-up of To-Do app
Step 2: Break down of UI into component hierarchy, layout containers and Interactions
Step 3: Create a master layout (markup and CSS)
I have created a flex box based layout that stretches accordingly to any dimension, I find this simple and effective for this demo. The master layout will be used in all versions of the app for consistency.
Step 4: Create skeleton code – main ingredients
For most front end frameworks, the code structure will loosely follow a general pattern as shown below:
Step 4: Create a skeleton code – React.js
Step 4: Create skeleton code – React Native
Step 4: Create a skeleton code – Vue.js
Step 4: Create a skeleton code – AngularJs
Step 5: Write code, refactor, refactor, refactor for the finished article
So here is the completed app in react.j :
… and here is vue.js version :
… for React native and AngularJs follow the links below: