We Keep Coding

How can components be imported with "import * as {name}" syntax in react native?

In a react-native project, I would prefer to be able to import all my component like I do with types in my reducers.
I want to be able to write:
import * as Components from '../components'
so I went to my components folder, created an index.js file, imported all the basic components, and exported them like export const ComponentExample1 = ComponentExample1 & export const ComponentExample1 = <ComponentExample/>. I figured there might be some naming related errors and thats what seems to have happened because I get the error:
Error: TransformErro SyntaxError: ......index.js: Identifier "ComponentExample1" has already been declared
All of my basic components are exported intra-component as export default ComponentExample1
How can I change my approach to effect my end desire?

You can re-export your default exported components in index.js
Example:
export { default as RoundButton } from './RoundButton'
export { default as Logo } from './Logo'

Delete
export const ComponentExample1 = ComponentExample1
and only keep
export const ComponentExample1 = <ComponentExample />

How to export all the components with require?

I'm making a Vue js application in which I need to export all the files / components from a certain directory and import those files / components them in a file i.e path.js.
How should I exports the components if I require them all in index.js so that I can access them in path.js as import {Component1,Component2} from index.js?
Note: I don't want to explicitly include components in index.js with import keyword that is why I used require.
Index.js
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";
const requireComponent = require.context(".", true, /\.vue$/); // used to fetch Component1.vue and Component2.vue
const components = {};
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName);
const componentName = upperFirst(
camelCase(fileName.replace(/^\.\//, "").replace(/\.\w+$/, ""))
);
components[componentName] = requireComponent(fileName).default;
});
export default components;
paths.js
import {Component1,Component2} from 'index.js';'
console.log(Component1); // undefined
I've tried exporting components as export {...components} but that throws an error.

It should be
import Component from 'index.js'
As you exported it in just a single constant value.

There is no such thing as Component1 or Component2 in Index.js, but I think I know what you are looking for.
You can achieve it through Named exports and imports.
Simple example below:
index.js
export {components[0] as Component1};
export {components[1] as Component2};
export default components;
paths.js
import {Component1, Component2} from 'index.js';
//some code

JavaScript: Removing decorators from create-react-app

Firstly, I want to say that I am very new to react world. I am using a react component from github in our project. I noticed that the component uses decorators in their code. And, to use that code as it is, I think we have to eject and use babel. But, we don't want to do that, so I plan to remove decorators (multiple) with the native code.
import React from 'react'
import dc from 'dc'
import BaseChart from './base-chart'
import coordinateGridMixin from '../mixins/coordinate-grid-mixin'
import stackMixin from '../mixins/stack-mixin'
import barMixin from '../mixins/bar-mixin'
#barMixin
#stackMixin
#coordinateGridMixin
export default class BarChart extends BaseChart{
static displayName = 'BarChart'
componentDidMount(){
this.chart = dc.barChart(this.chart)
this.configure()
this.chart.render()
}
}
I started this with the following code, with the help of this page.
import React from 'react'
import dc from 'dc'
import BaseChart from './base-chart'
import coordinateGridMixin from '../mixins/coordinate-grid-mixin'
import stackMixin from '../mixins/stack-mixin'
import barMixin from '../mixins/bar-mixin'
import compose from 'recompose'
class BarChart extends BaseChart {
static displayName = 'BarChart'
componentDidMount(){
this.chart = dc.barChart(this.chart)
this.configure()
this.chart.render()
}
}
export default compose(
coordinateGridMixin,
stackMixin,
barMixin
)(BarChart);
Doing this I get an error "export 'default' (imported as 'compose') was not found in 'recompose'
That make me wonder, do I need to use recompose? Or, there is a different and simpler way? Not sure how to replace this piece.
export default ???(
coordinateGridMixin,
stackMixin,
barMixin
)(BarChart);
Any help would be appreciated. I am not sure if I have given enough information to you to help.

Your error is about recompose exporting nothing by default, so your import is incorrect, you should import compose like this :
import { compose } from 'recompose';
You can also chain decorate your component to do it without recompose (not 100% sure about the syntax) :
let decoratedBarChart = coordinateGridMixin(BarChart);
decoratedBarChart = stackMixin(decoratedBarChart);
decoratedBarChart = barMixin(decoratedBarChart);
export default decoratedBarChart;

Import object contained in another object

I want to do something like this, but using import rather than require:
const MySubmodule = require('react-native').MyModule.MySubmodule;
I tried:
import { MySubmodule } from 'react-native/MyModule';
import { MySubmodule } from ('react-native').MyModule;
import { MySubmodule } from 'react-native'.MyModule;
None of these works.
So any idea how to import a module contained in another using import?

You will have to import MyModule completely, and can then separately destructure it to get the parts you are interested in:
import {MyModule} from 'react-native';
const {MySubmodule} = MyModule;
The import statement does not support directly destructuring exports. See also this Babel issue for some more info.

ES6 import in for-of-loop

Is there any way to import and export multiple files using for-of-loop (or another loop) in ES6?
const moduleNames = ['NumberUtils', 'StringUtils', 'ArrayUtils', 'MyModule', 'AnotherModule', 'BaseModule']
let modules = {}
for (const moduleName of moduleNames) {
import module from './' + moduleName
modules.moduleName = module
}
export modules
Without loop I have to write:
import NumberUtils from './NumberUtils'
import StringUtils from './StringUtils'
import ArrayUtils from './ArrayUtils'
import MyModule from './MyModule'
import AnotherModule from './AnotherModule'
import BaseModule from './BaseModule'
export {
NumberUtils,
StringUtils
ArrayUtils
MyModule
AnotherModule
BaseModule
}

One of main features of ES modules is they can be statically analyzed. For this reason import statement follows strict syntax - so does export. A snippet 'without loop' is the way it has to be done.
This allows to figure out module imports and exports exactly in IDEs and tools. This is useful for tree-shaking, for instance.

I think that better and more clear way to do it is to create an index file and then import multiple components in one import.
//index.js
import PopUp from './PopUp';
import ToggleSwitch from './ToggleSwitch';
export {
PopUp,
ToggleSwitch
};
//app.js
import { PopUp, ToggleSwitch } from './components';

For multiple import files I found this solution:
const files = require.context('../myFolder', true, /(Module|Utils)\.js$/)