React - library, or basically a framework for creating user interfaces, is based on components that manage their own state, so that building an application becomes a game of LEGO bricks. In this post, we will outline the principles to follow when building react.
What does it mean to do react-a well?
The first point, the last point, the only point... - don't spoil the fun.

Start with the questions asked to the customer
He who asks does not wander. Talk to your client (even if you are one yourself), about what you want to see in the final version, what you want to provide to the recipient, what vectors you should follow when creating the application "on paper". It is a mistake (in my opinion) to start the conversation with the question "What colors do we give?" or "navigation on top or on the side?", the head in which the idea was born is like a refracted eye whose perception is focused on a key element, start with it and sharpen the surrounding frames over time.
The next step - router implementation
In reality, this will never be the case, because the code knows what the future will bring us. Personally, I always start with the router implementation. Has anyone come up with anything better than React Router (https://reactrouter.com)?
With that behind me, it's time to implementation of the global state of the application, whether built into React context (https://react.dev/learn/passing-data-deeply-with-context), whether it Redux (https://redux.js.org), the earlier the better.
Step three, css framework. A third world war can be unleashed with this topic, let's leave it for another time.

 Application of Storybook
Can we get started already? Both yes and no. The time has come for things that are there, but you can't see them. Let's start with the speed at which the application will be created. In many editors we can create so-called "Snippets". These are predefined code snippets that we call with the appropriate macro. In my opinion, each file in its category should contain its own template. Moving on, I will propose something very controversial. Documentation, usually saves your ass, but usually not us.Â
Â
How about self-creating documentation? Storybook (https://storybook.js.org), is a great tool, not only for those who are revisiting the code of our application, but also for those who are in the process of developing it.

Â
Start writing code
Let it be, I allow. However, I have my 3 cents on the matter. I don't want your next application to look like a wall of divs called classes, or identifiers. I've never liked that, so I'll leave you with the knowledge that a library exists Styled Components (https://styled-components.com). I know that not everyone needs it, I know that there will be stubborn people for whom it is another unnecessary addon. For me, it is an essential part of any React project and I can't imagine creating a structure using a div instead of a Wrapper.
Â

Â
Continuation of the project
Is the project already a bit of a life or do you anticipate many years of support? It will be useful to have something to take care of the code, so that posterity will not ask: "why?", "why?" and "who was so inventive?". Unfortunately, there is no simple cure for this, every project has its own rules, every developer has its own habits, every company has its own standards. What I can offer is a simple project template that I have been using for several years. It hasn't failed so far, and best of all, it has been a lifesaver more than once when revisiting 2+ year old projects.
Â

assets - Fonts, images, css, in short everything that is not code.Â
pages - The source from which our router will draw.Â
services - data operations, this is the right place. Â
   -> actions - Any helpers dedicated to the project.
   -> contexts - A folder dedicated to application state management mechanisms.
   -> hooks - custom hooks containerÂ
utils - toolkit that can easily be copied between projects, in an ideal world it would be another npm module,
components - This star does not need to be introduced to anyone, inside the skeleton of the site, individual components as well as entire schemes, we can manage any methodology here, such as Atomic Design
Sample project react
For the purpose of the article, I created a basic design visualizing what lies where, for what purpose it was placed there and where it will be used.Â
Project code available online: https://github.com/Klaku/react-example-app.
- Support and development of Microsoft and Nintex based applications
- Application design and development including digital processes
- Invoice management
- Requisition management
- Contract management
- Modern Intranet
ISCG sp. z o.o.
Al. Jerozolimskie 178, 02-486 Warsaw
NIP: 5262798378
KRS: 0000220621
Phone