React architecture for a huge business application

Question

So we\'ve recently picked up React in our company as the front-end technology to build our huge business web application. By saying recently, I mean we don\'t have any previous

Answer 1

Completely understand your feelings when you start with React and Redux. We were in the same situation when we started with React in our company. At first React has different approach than other frameworks. Yes of course it's not framework, it's just library. You have to start thinking in React way and that is: React components just render state (It's like you render scene on your graphic card at first you have to prepare scene then you are able render), all what component can do is dispatch actions, or better call just action creators.

You need some smart way how to store state in that point I will suggest use Redux.

We also use TypeScript with combination React, Redux. you have to write more code than pure JS but static type control is priceless when you work on large project.

Separating components logic is native approach of react ... you have to separate logic write "Dummy components" and then reuse this with connect. Or passing values as props.

We are using Thunk middleware as action creators it's good because connected component will call just method and logic is in action creators. You have access there to whole state of app then you can fetch something and base on result you can dispatch different actions.

What I like on react/ redux is how to implement async calls etc. First design component to map all states

1) like I have no data 2) data loading 3) loading done 4) loading error

For that you need only one semaphore in you state and a few checks in render method. Then one action creator that will load data and base on progress dispatch action that describing progress.

What is also cool that in react/redux app you have single data flow it's good when new dev jump into project.

For UI we are using Material UI, yes this framework has some problems but nothing what you will not able to deal with.

We are using also Router for navigating in app.

In the beginning I will avoid server side rendering because it will much easier for you start just with client side rendering and with initial state.

When we start for us was useful this template where everything works in one project JavaScriptServices

Then off course great Abramov tutorials.

For design components very useful Storybook

We can write why use or not React for long time ... but What I can say ... for us it was good choice, with some pain in begging but now we have good payback.