DEV Community

Discussion on: Getting started with Tailwind and React: A simple login form tutorial.

Collapse
chema profile image
José María CL

BTW, In the last code snnipet you imported the components in this way:

import { PrimaryButton } from '../components/FormElements/Button';
import Input from '../components/FormElements/Input';
Enter fullscreen mode Exit fullscreen mode

I would recommend to export them all using an index.js file in favor of a cleaner way to import them.

// Supose we have this modules
- components
  |- form-elements
    |- primary-button
    |- input
    |- index.js
  |- index.js
- pages
Enter fullscreen mode Exit fullscreen mode
// components/form-items/index.js
export * from "primary-button";
export { default as Input } from "input";
Enter fullscreen mode Exit fullscreen mode
// components/index.js
export * as FormItems from "form-items";
Enter fullscreen mode Exit fullscreen mode

So you can import them in one of these ways

import FormItems from "../components";

return (
  <div>
    <FormItems.Input />
    <FormItems.PrimaryButton />
  <div>
);

// or
import { PrimaryButton, Input  } from "../components/form-items";

return (
  <div>
    <Input />
    <PrimaryButton />
  <div>
);
Enter fullscreen mode Exit fullscreen mode
Collapse
ms_yogii profile image
Yogini Bende Author

Thanks Jose. That's a good catch. I sometimes avoid creating index.js for small projects. But surely, that makes code more cleaner.