How to implement an adequate React application structure?

Question

React

I'm learning React and I'm faced with the task of creating an application structure. I read some articles and advise to distribute logic into smart and presentational components. Now I have made such an architecture for myself. Tell me, what did I do, is it ok?
- api (Api requests to the server will be here)
- actions (Actions)
- components (presentation components of buttons, forms, menus - everything related to display)
- containers (smart components - wrapping stupid components for example:
Presentation component:

function ContactForm() {
 return (
   <form className="contact-form >
       <ContactFormInput />
       <ContactFormInput />
       <ContactFormButton />
   </form>
 );
}

smart component

function Contact() {
 return (
   <ContactForm />
  );
}

- store.js (State store using react-easy-state)

Answer 1

Yes, it is quite. For such an application, more is not needed.
But dividing the components into smart and presentational is a so-so idea, for every smart one there is smarter, in this context, each parent in relation to the child component will have its own parent.
If you also mean by "smart component" the one where all the logic of the big component will be, the parent of the smart component and its children. It’s better to write the logic in such a way where it is appropriate - on the spot, without leaving the cash register)
And try to transmit data less by props, where it can be avoided, so as not to litter the logic of data movement.
In your example, the ContactForm component is more suitable for the role of a smart component, in which there will be all possible logic - processing of imputs, etc., and for the role of presentational - inputs. And in the Contact component, if there is nothing else, you can simply remove it, and if you need a wrapper for it, just wrap it in a div and that's it.
good luck with your study)