Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What would be a good diagram for designing React.js UIs before writing any code?

So basically, I mean something like UML for designing classes in Object-Oriented programming. How can we use a diagramming software to design (model) our UIs (Components, props, states, event etc) before writing any actual code?

like image 287
odiwxe Avatar asked Apr 17 '18 13:04

odiwxe


People also ask

What is the best architecture for React?

For example, a React architecture will include several UI components such as buttons, forms, API services, Central State Management services, etc. Because of this ReactJs architectural freedom, it is the most preferred JavaScript library (framework) for building front-end applications.

Which design pattern is used in React?

The higher-order component, or HOC pattern, is an advanced React pattern used for reusing component logic across our application. The HOC pattern is useful for cross-cutting concerns — features that require sharing of component logic across our application.

Is React MVVM or MVC?

React itself is just a presentation layer library. If you use it along with Flux / Redux then you will be using the GoF Observer pattern, which roots back to Alan Key's MVC that is slightly different than "modern mvc" as popularized by 00's and 10's web frameworks.


2 Answers

You can use the https://balsamiq.cloud/ for creating the wireframes of UI before starting the actual code.You can create the mobile view screens for different mobile versions in that.Later you can work on the screens wise.

Once the UI is done you may get the clear idea of what is needed in reactjs states and props values.

like image 117
Venkatesh Somu Avatar answered Nov 15 '22 08:11

Venkatesh Somu


Pen and paper ... whiteboard. It might sound like I'm kidding. But I find this to be the best way to model your app. When I'm done with a whiteboard diagram, I take a photo if I need to share it.

It does two big things, imo: 1. it keeps things simple so you get the important stuff figured out without overcomplicating things so you get started coding; 2. it doesn't look too official or polished so you remember it's just a sketch. When it comes time to write your code, your established patterns and conventions should dictate your app architecture and your "wireframes" should just be a reference to look back on.

Again, just my own opinion. There is no single answer to your question.

like image 44
mccambridge Avatar answered Nov 15 '22 10:11

mccambridge