React uses Flux architecture and it is said in .html that React has two models - state and props. And there are some suggestions for model management in React .html - but all of this seems to some additional layers to enhance the Flux. The big questions to which I am seeking the answers are:

• Should I define model classes in React? I.e. if I have Customer class notion, then I can: 1) define the attributes of Customer directly as the attributes of state/props 2) define the attributes of Customer as the attributes of state.customer/props.customer; 3) define some JavaScript template/class Customer separately and simply say, that state.customer/props.customer is of type Customer and don't repeat attributes in the state/props. I feel, that 3) is the right approach, isn't it?
• If 3rd options (of the previous point) is the right approach, then how can I define the Customer template and how can I define that state.customer/props.customer is of this template? I could use those template in some serialization, some model validation tasks as well and I could use in ReactNative project as well.

React uses Flux architecture and it is said in https://reactjs/docs/thinking-in-react.html that React has two models - state and props. And there are some suggestions for model management in React https://reactjs/munity/model-management.html - but all of this seems to some additional layers to enhance the Flux. The big questions to which I am seeking the answers are:

• Should I define model classes in React? I.e. if I have Customer class notion, then I can: 1) define the attributes of Customer directly as the attributes of state/props 2) define the attributes of Customer as the attributes of state.customer/props.customer; 3) define some JavaScript template/class Customer separately and simply say, that state.customer/props.customer is of type Customer and don't repeat attributes in the state/props. I feel, that 3) is the right approach, isn't it?
• If 3rd options (of the previous point) is the right approach, then how can I define the Customer template and how can I define that state.customer/props.customer is of this template? I could use those template in some serialization, some model validation tasks as well and I could use in ReactNative project as well.

• javascript
• reactjs
• class
• react-native
• flux

• 5 There are no rules for this, React purely focuses on UI - how you manage your app state is entirely up to you. – James Commented Jun 16, 2019 at 21:42
• 2 If you dive in and start making something, you'll get a feel for how your data should be structured for your project. – jmargolisvt Commented Jun 16, 2019 at 21:47
• 1 @James, can you point me to some examples? React does not seem to focus purely on UI. If it did it it's docs and examples wouldn't all show storing the model in react state. – user128511 Commented Oct 6, 2020 at 2:52
• 1 @gman whilst React has mechanisms for holding state relative to a view, it is not strongly opinonated on how you manage your app state. It's a UI framework at the end of the day, and there are a few out there, so if you chose to couple your app state by holding it in views or using Context then that's a design decision that you make, and not one React forces on you. – James Commented Oct 6, 2020 at 22:49
• 1 @James, all of the React docs use React's state, context, etc. If they were separate concerns then they'd be separate libraries. A UI library, and a separate state library. Clearly React does not focus purely on UI. If it did the state parts would not exist. Examples of how to separate the two would be way more useful the ambiguous statements that "it's possible" – user128511 Commented Oct 7, 2020 at 4:38

1 Answer 1

The most basic way is shown in following snippet:

const Customer = ({ name, age }) => (
  <div>
    <p>Name: {name}</p>
    <p>Age: {age}</p>
  </div>
);

const App = () =>
  [{ name: "Bert", age: 22 }, { name: "Alfons", age: 45 }].map(
    ({ name, age }, i) => (
      <>
        <Customer key={i} name={name} age={age} />
        <hr />
      </>
    )
  );

Where you define these props depends on where you need them. If only one ponent needs the props, you define them in that ponents state. But often you need the props in several ponents, so you lift them in your hierarchy up. That often results in a very "smart" ponent (a ponent that has a large state).

If your app bees large and confusing, I suggest you store your state externally. To do that, you can use react context. It allows you to inject props to ponents that need it, rather than passing it several layers down in your hierarchy.

If you don't want to write your own context, you may use state management solutions like redux or mobx. They use context too, but provide convenient functions to easily connect a ponent to your external state.