I´ve several React components as a library in folder ux (some itens below):
import MessageBar from "./atoms/MessageBar/MessageBar";
import Spinner from "./atoms/Spinner/Spinner";
import Button from "./atoms/Button/Button";
import AccordionHeader from "./molecules/AccordionHeader/AccordionHeader";
import AutocompleteList from "./molecules/AutocompleteList/AutocompleteList";
import ButtonGroup from "./molecules/ButtonGroup/ButtonGroup";
import LoginPanel from "./organisms/LoginPanel/LoginPanel";
import WelcomePanel from "./organisms/WelcomePanel/WelcomePanel";
I wish to export these objects so that it can be imported from its group:
import LoginPanel from "ux.organisms";
Or
import Button from "ux/atoms";
Or whatever.
The idea is that you are getting the element from an specific group inside ux library.
What is the suggested way to export all of those components, organized into groups (atoms, molecules, organisms, etc.) ?
PS:
a. I don´t wnat to change the component name (ButtomAtom, etc...)
b. The result will be a npm library to be imported by other projects. So, this code will reside on my ux/index.js file.
Then make a index.js file at ux/atoms/ and fill it with:
import MessageBar from "./MessageBar/MessageBar";
import Spinner from "./Spinner/Spinner";
import Button from "./Button/Button";
//...
export { MessageBar, Spinner, Button };
So now one can do:
import { MessageBar } from "ux/atoms";
Or if you need every submodule:
import * as Atoms from "ux/atoms";
Related
I am attempting to refactor the import and exports in my react project.
Lets say I have project of this structure:
=react-project
===public
===src
=====components
=====page
=======Page1.js
=====services
=======ApiService.js
.
This is how I import ApiService in Page1.js currently:
// in Page1.js
import {ApiService} from '../services/ApiService'
This works but it will start to get messy as project gets larger and convoluted, so Im trying to refactor it and this is my new code structure:
=react-project
===public
===src
=====components
=====page
=======Page1.js
=====services
=======index.js
=======ApiService.js
//in index.js
export * from './ApiService'
and this is how i import ApiService from Page1.js now...
//in Page1.js
import {ApiService} from 'services'
However this doesnt work! Am I missing something? I want this import {ApiService} from 'services' to be how it is like eventually. Such that I can import in the same way at any component or page.
I have a parent directory that contains children directories, where each contains an SVG component and I only need to import some of them. I'm currently importing all the components I need by doing this:
import FacebookIcon from 'project/icons/Facebook';
import TwitterIcon from 'project/icons/Twitter';
import DiscordIcon from 'project/icons/Discord';
import MediumIcon from 'project/icons/Medium';
import YoutubeIcon from 'project/icons/Youtube';
However this seems very verbose. Is there a less verbose way of doing this?
I thought about destructuring, but I wasn't sure how to do this since each file is in a different folder.
Typically, you want to import similar components from a single source (you will get auto-complete too):
import {
FacebookIcon,
TwitterIcon,
DiscordIcon,
DiscordIcon,
MediumIcon,
YoutubeIcon,
} from "project/icons";
// Usage
<FacebookIcon/>
// Same
import Icons from './project/icons';
// Usage
const Icon = Icons.FacebookIcon;
<Icon/>
To achieve this, create index.js file in project/icons and make named export for each of the components.
export { default as FacebookIcon } from "./FacebookIcon";
...
In the React Bootstrap docs, it is suggested that modules be imported individually from single distribution files rather than from the larger distribution file.
import Button from 'react-bootstrap/Button';
// or less ideally
import { Button } from 'react-bootstrap';
Why is the second method less ideal?
As that link says:
You should import individual components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.
If you import from react-bootstrap, the client will have to download everything in react-bootstrap. That could end up being quite a large chunk of code. In contrast, if you import from the react-bootstrap/Button, all that needs to be downloaded is the button - nothing extraneous is included.
Compare the file:
https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Button.js
to
https://github.com/react-bootstrap/react-bootstrap/blob/master/src/index.js
As you can see, importing from the Button requires a few imports:
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import { useBootstrapPrefix } from './ThemeProvider';
import SafeAnchor from './SafeAnchor';
But importing from the index.js requires a very large number of imports, 77, to be precise.
export Accordion from './Accordion';
export AccordionToggle, { useAccordionToggle } from './AccordionToggle';
export AccordionCollapse from './AccordionCollapse';
export Alert from './Alert';
export Badge from './Badge';
// and 72 more
If you import from index instead of from Button, you're downloading a lot of code that you don't need, for no good reason.
Say I have class Panels and class Panel in my ui.
I want to avoid multiple statements such as import Panel.. and import Panels ... every time I decide to use them.
Instead, I want to re-export Panel from Panels once, and in my app just say something like import * from 'Panels.js' causing both Panel and Panels appear in the scope of my App.
Is this possible? Good tutorial on the subject? thanks.
You can use import * as Panels from 'Panels';
Inside your code you should use Panels.Panel and Panels.Panels
Don't forget that you need to export both in order to import them
You can import several things from the same module like so:
import { Thing1 , Thing2 } from "module-name";
Or import everything like so:
import * as everything from "module-name";
For all other variations see: https://developer.mozilla.org/sv-SE/docs/Web/JavaScript/Reference/Statements/import
I got this error in my browser
Error in ./src/App.js
Module not found: ./components/todo in C:\Users\James\Desktop\react\src
This is what I got in my editor
import {TodoForm, TodoList} from './components/todo'
http://imgur.com/a/8YLod
I even tried import {TodoForm, TodoList} from './components/todo/' I wonder what's wrong.
Imports work on a per module basis for most loaders/bundlers. In other words, you'll need to import the form and list by doing the following:
import { TodoForm } from './components/todo/TodoForm'
import { TodoList } from './components/todo/TodoList'
As a side note, see https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export to make sure that you're exporting the components correctly. The curly braces around your import works for a named export as opposed to a default export.
In order to just import all files from the directory you must have an index.js file that exports everything from the directory
Which in your case the index.js file would look like this
Export * from 'TodoForm'
Export * from 'TodoList'
Note if the export statement doesn't work see this answer to fix the import / export statement
Do you think, when you wrote import {TodoForm, TodoList} from './components/todo', in TodoForm should be value than you exported from file TodoForm.js, and similarly with TodoList? It's don't works.
You should do import from some file. When you wrote from './components/todo' you tried doing import from todo directory. I guess, in egghead video that import works, because, they have index.js file in todo directory. And in this file they do export for every component separately. Try to add index.js file in todo directory with the following contents:
export * from './TodoForm.js';
export * from './TodoList.js';
it's will work.
So the thing is that when you do
import {TodoForm, TodoList} from './components/todo'
What happends is that your compiler will by default search the components TodoForm and TodoList from the index.js file since you have not mentioned explicitly which files to point to
So if in index.js you add something like
export * from './components/todo/TodoForm';
export * from './components/todo/TodoList';
Your approach will work.