I don't understand why export like this in React - reactjs

I found many files were exported like this, but I don't understand why these were exported this way.
Are there any advantages or reasons?
index.ts
export { default } from './Something'
Something.tsx
cosnt _Something= () => {
some codes....
}
cosnt Something = memo(_Something)
export default Something
These two tsx file exist same directory.

You're looking for default export and named exports.
in export default Something case, you can use it with import Something from 'path'. So you only want to export one thing. It can be used as a namespace also. It equals export { myFunction as default };
in export { Something } case, you can use it with import { Something } from 'path'. You can export many things with names. It increases the readability. For sure, you can also import { Something as Another} from 'path'.
These two appoarches are not conflict. But only one default can be assigned.
// index.ts
export default function Something(){
}
export const CONST_A = 'A'
export const CONST_B = 'B'
// use.ts
import { default as Something, CONST_A, CONST_B} from './index.ts'

Its just a pattern, instead of importing exact paths:
import Nav from 'components/Nav.react';
import Tooltip from 'components/Tooltip.react';
Sometimes you want a merge:
import { Nav, Tooltip } from 'components';
It requires exports from index file located at the target folder ('components' in this case):
// src/components/index.ts
export * from './Nav.react';
export * from './Tooltip.react';
// Or
export { Nav } from './Nav.react'; // Has a named export
export { default as Tooltip } from './Tooltip.react'; // Has default export
See more context in other question How to intellisense alias module path in VSCode.

Related

How to use import statement in react?

how to use import statement to import functions from one component to other component.
Below is how the import statement is:
import Tool from '../Common';
import { ToolContextProvider } from '../Common';
This complaint of duplicate lines. So I have tried something like below,
import { ToolContextProvider, Tool} from '../Common';
But this doesn't seem to be correct. How can write this in one line.
Could someone help me with this? Thanks.
basically there are two different type of export in javascript modules (also react included):
default export
named export
default export would be like :
// someFile.js
export default SomeComponent
named export would be like
// someFile.js
export SomeOtherComponent
importing them in other components for using them should be like:
// useCase.js
import SomeComponent from './someFile' // for default export
import { SomeOtherComponent } from './someFile' // for named export
import SomeComponent, { SomeOtherComponent } from './someFile' // for using both
You can import like this. Just combine both of them.
import Tool, { ToolContextProvider } from '../Common';

React js : how to resolve multiple export?

Hello i need to have a multiple export in react js but i have this error
Line 84:3: Parsing error: Only one default export allowed per module.
this is my code :
export default App;
export default dashboardRoutes;
What i should to do to resolve this problems please !
You can export only one default component and the other like this:
export default MostImportantComponent
// other components
export {
Component1,
Component2,
// ... etc
}
Notice that when you import the other components from other files you need to
import DefaultComponent from '...'
import { Component1, Component2 } from '...' // for other components
There are basically two types of exports.
1.Named Exports(Zero or more exports per module): This allows you to export multiple modules from a javascript file which is the case in your issue.
Solution to your case goes as follows
modules.js
export {
App,
DashboardRoutes
};
app.js
import {App,DashboardRoutes} from './modules.js'
You can equally change the names of those modules in the import file as follows
Default Exports(One per module): This allows you to export only one module, which is the reason it showed you the error you have. This gives you the advantage of using a name of your choice in the file you import it from.
modules.js page
const module1=()=>console.log('module1');
export default module1
app.js
The page that is using the modules
import MyModule from './modules.js'
You can read more about it here
you can use named export or one as default and other as named export.
Define functions
function sum(a, b) {
return a + b
}
function sub(a, b) {
return a - b
}
function mul(a, b) {
return a * b
}
Define export
export { sum, sub, mul }
Import functions you need
import { sum, sub } from 'myfile'
or all the functions
import * as myfunctions from 'myfile'
and call as
sum(1+1) or myfunctions.sum(1+1)
src: https://flaviocopes.com/how-to-export-multiple-functions-javascript/

When I try to export action with redux I get an error that says "does not contain a default export"

I am trying to learn redux and I have a file with an action in it.
export const changeTitle = () => {
return {
type: 'CHANGE_PROJECT_TITLE',
};
};
Then I am trying to import it in a component.
import changeTitle from '../actions/index.js';
This works if I use export default in the action file but then I can only have one action.
export default changeTitle;
I am trying to figure out why it will not work without the the export default.
When I try without the export default I get an error that says : "Attempted import error: '../actions/index.js' does not contain a default export (imported as 'changeTitle')." I believe I have seen examples that work without the default export so they can use multiple actions.
in your case just change
import changeTitle from '../actions/index.js';
to
import { changeTitle } from '../actions/index.js';
and you can omit index.js name in import, it's default file for import
import { changeTitle } from '../actions';
more information about export you can find on mdn

TypeScript - export default as

Working on react application in TypeScript.
I'm trying to understand the correct syntax for exporting a default component using as
Up till now I've used:
class HomePage extends Component<IProps, IState> {
...
}
export default HomePage
or in shortly:
export default class HomePage extends Component<IProps, IState> {
...
}
now, after adding redux support. I have something like:
class HomePage extends Component<IProps, IState> {
...
}
const mapStateToProps = (state: StoreState) => {
...
};
const mapDispatchToProps = {
...
};
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);
but I can't figure it out how to add as to the connect default export
e.g something like:
// This is NOT working. I get Syntax error.
export default connect(mapStateToProps, mapDispatchToProps)(HomePage) as HomePage;
is it possible? or should I do it? it's seems that anyway the export name is HomePage (when I'm importing HomePage in other file, the IDE is automatically detects and import this file). Where is it taken from? the name of the file (HomePage.tsx)?
This is do work for me:
const connectedHomePage = connect(mapStateToProps, mapDispatchToProps)(HomePage)
export {connectedHomePage as HomePage};
but it's two lines (I prefer in one line) and it's not a default export.
so, is there a way to export default AND adding as to the statement? just so it will be clear what is the exported name?
as has 2 meanings. In ES6 modules, it can be a way to rename an import or export. In TypeScript, it is a typecast operator. I am going to assume you mean the first, specifically a way to rename an export.
Now take a look at this expression you suggested:
export default connect(mapStateToProps, mapDispatchToProps)(HomePage) as HomePage;
Do you want to export it as default or do you want to export it as HomePage? When you export default, default is the export name. Given that, does this make sense to expect it to be called HomePage? You either export something that is called default or something that is called HomePage.
This table associates different export statement forms with the expected export name and local names:
For importing, though...
If you are importing a default export, you have to explicitly name the import. Default exports will not automatically have a local name after importing. Example: import express from "express". The local name does not matter. Could as well be import banana from "express".
If you are importing a named export, by default, the local name will be the same as the exported name. Example: If you have export const x = 2, then, you should import it as import { x } from "module". You can also rename the import like this: `import { x as y } from "module".
The above tables are from the ES6 specs: http://www.ecma-international.org/ecma-262/6.0/

When using ES6, how can an imported function be undefined in one file, and not in another?

I'm using babel / ES6 with webpack. I'm importing the same 'actions' file - which exports a bunch functions - in two different places. At one place it returns a module, the other undefined:
actions.js
export function test() { ... }
export function test2() { ... }
App.js
import actions from './actions'
class App extends React.Component { ... }
console.log(actions); //<-------- Object{test:function,test2:function)
export default connect((state) => { ... },actions)(App);
edit
the reason App.js worked was because it was actually using import * as actions as sugested below, I just retyped it wrong in the example
NestedComponent.js
import actions from './actions'
class NestedComponent extends OtherComponent { ... }
console.log(actions); //<-------- logs undefined
export default connect((state) => { ... },actions)(NestedComponent);
Is this related to the order in which webpack defines the modules/files?
I ran into a similar issue, caused by circular dependencies. Tried to import a constant in file 'A' from file 'B' which in turn tried to import from file 'A'.
This shouldn't work in either case because you are importing the wrong values. import foo from '...' imports the default export of the module, but you don't have a default export, you only have named exports.
What you should use is
import {test, test2} from './actions';
// or
import * as actions from './actions';
Another common case where this happens is if you're testing with Jest and auto-mocking behavior is enabled. Much grief, such gotcha.

Resources