Hi, I read online that it’s a good practice to separate your logic from your presentation, I personally agree with this, but I’m not sure how I can achieve that?
Here is my idea, i have this Login component
/components
/Login
index.js
LoginForm
and then I can write all of my logic related to that Logic component in index.js file and then call LoginForm
component in order to display the form itself.
Am I on the right track? what can I do better?
Export the component/s related to login in index.js, it has meaning when node resolves files. If you’re splitting out stuff have another file/s that are just JS doing whatever you’re doing alongside the component files, import those where they’re needed in the components in that folder
thanks, but it doesn’t answer my question.
Then I’m not sure what you want, that’s an answer to your question. You asked how to seperate out the logic, I said you put the other files with other logic alongside the index file (which should be the login component), import them into there, export the component. That’s normally how things are structured if you’re putting components in their own folders: currently the structure isn’t that
LoginForm
|_ SomeSubComponent.js
|_ some-utility-logic.js
|_ index.js
// index.js
import { foo, bar } from "./some-utility-logic"
import { SomeSubComponent } from "./SomeSubComponent";
export const LoginForm = () => (............the main component);
// somewhere else in the app
import { LoginForm } from "./LoginForm";