Zalaboza Zalaboza - 1 year ago 145
React JSX Question

React redux oop classes

coming from angular i used to have a class for every entity in my DB, such class encapsulated all entity behaviour.

for example users Class can look like

export class User{
static notValid(u){
return !!(( && > 0 && u.fullname && u.fullname.length > 2 && u.picture) === false);
static fromArray(arr){
let pack = [];
for(let i=0;i<arr.length;i++){
pack.push(new User(arr[i]));
return pack;
constructor(u){ = || 0;
this.fullname = u.fullname+'' || 'N/A';
this.picture = u.picture+'' || '/imgs/logo.png';
this.role = u.role || 'N/A';
this.username = u.username+'' || ''; ='' || '';
this.dob = u.dob || 0;
this.gender = u.gender+'' || '';

this.isValid = !User.notValid(this);
this.saved = > 0;
let n = this.fullname;
this.nickname = n.split(' ').shift()+' '+n.split(' ').pop();
if(!this.saved)return $'/user',this.toJson);
return $http.put('user/',this.toJson());
//tojson is defined in prototype;
return {,fullname:this.fullname,picture:this.picture,nickname:this.nickname};


so that my controller doenot know about how to save or update User, all it have is to trigger save() on user object.

Now React world, where every thing inside app is a component;

1. how can i replicate such approach inside react component ?

i read alot that there is presentational components and smart components. but what about Data Model component ?

2. if i port all my current class's to react should i also implement render method ? can i have multiple render functions to return different html based on page.

example above User can appear inside Profile will all details, and as a card in users list, so i should keep html for both inside class prototype ?

Answer Source

You seem to be a bit confused about React and what it is designed to do which is perfectly normal, coming from the Angular world.

The thing is, as far as React is concerned there is no such thing as a data model, only components. These components can have state (or they may not) and these components are rendered to the DOM.

Various types of components seem to have confused you as well. React is only concerned with how data is presented. Presentation and container components are distinguished from each other to make it easier for us to reason about how to manage application state.

To answer your specific questions:

1) If you are really adamant about keeping your existing structure and make it work with React, you don't actually need to do a lot of work. Your data model components are just JavaScript objects. You can pass them around and you can give them to components. When some event happens in the components, you can call the relevant methods in your objects. You will need to make sure that Angular specific methods are ported to pure JavaScript though.

I advise against this approach. It will work at first but you will find yourself in a maintenance hell in no time. Believe me, I'm building large scale React apps in my job and I have been bitten by similar decisions when I first started writing React components.

2) Certainly you could add a couple of React methods to your class definitions and also throw in the presentation code (that is, HTML) and presentation state. Then you would be able to render these components.

But that really is not the way to go about it. React doesn't decide on anything for you whereas Angular is very opinionated about this. First and foremost you should follow some tutorials on React. Looks like you have a sizable application in your hands, so I would advise you to look into Flux and Redux as well.

After that you should sit down and design how your application should work and how your state should look. After that it will be a breeze to go through the actual coding part.

You can NOT have multiple render methods in a React component, that makes absolutely no sense. React is pure JavaScript and JavaScript doesn't have any concept of overriding class members in the sense of classical OOP. Heck, JavaScript doesn't even have the concept of a class, that has been included in ES6 so people coming from class oriented programming languages wouldn't need to properly learn how the prototype chain works.

React components, and JavaScript objects in general, can only have one key. You can try this in your browser's console.

let a = {b: 1, b: 2};

The object a will only have one b key and the value for that key will be 2.

Having said all this, you can delegate the actual rendering of a component to other objects based on some conditions using normal JavaScript coding methods. But this isn't how React is supposed to work. Your render method can be able to decide on what to render based on your conditions.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download