How can I know if my data needs to be a react.js component?

Question

I'm looking at React.js, and trying to see if it can help me with my recurring sets of data that I have on various pages. All the data is from a database, say a list of names and addresses, a tabular set of data, semantically tags.

I might need that set of information on more than one page. I'm using a PHP MVC framework (in-house), so I can call that data as needed, but I don't know if I'm able to consider the set a "component."

I don't want overkill, but I might have lots of sets of data like that, and the data will be related (from some RDBMS). If I have a name and address, I may want to see how many orders I sent there. Is that orders set a component I can build? Examples could be multiplied.

Almost everything is from a form that is submitted and returns read only data. No inserts, updates or deletes, only select.

Is something like Angular.js a better suited framework? Overkill?

I had this on SO but deleted it. I think it is more of a design question.

Answer 1

If you're getting some data, and you're rendering that data, it's a component. It's as simple as that. Pretty much everything that renders should be a React component. Most other things do not want to be React components.

The React framework and lifecycle is completely built around "Render this data" as it's pretty much sole purpose. If the responsibility of the code could be summarized that way, then it's a component. Otherwise, it's a poor fit for being a component.

Answer 2

Reusable components are the core of any React app. You can create a component for each type of data that you receive from the database and render them whenever the need arises. To decide how to break up components, refer to this post from Facebook.

As for the relation data you wish to work with, this is where the real design considerations might come in. If you are storing the data as props for each component, you will have to make sure that your design permits the top-bottom or bottom-top trickle of data or you may not be able to perform your relational queries. On the other hand you can store it as global or use any other approach you might deem right.

Another thing to be considered is that React is not a MVC framework so you cant task your Controller to store the data in Model and have the View work with it. In React you can either use the Isomorphic approach to get the data or you can make AJAX requests to your server. You should probably have a look at Flux Architecture for React.

As for using Angular, it's a full fledged MVC framework while React's chief concern is the View. It down to personal preferences.

Personally I use React whenever I need a 'stateful' web app. Where I need to handle view changes in real time based on user's interactions with the app. React is best suited for this purpose, but if your app is going to be more of a static nature, you can definitely use React but you won't be harnessing it's full potential.