Importing a module in a React Native app - reactjs

I'm new to the ES6 module system so this may sound silly.
In the React Native Starter App that uses NativeBase, can anyone explain how native-starter-kit/js/components/home/index.js can do
import myTheme from '../../themes/base-theme`;
when the file it is importing from, native-starter-kit/js/themes/base-theme.js did not have any code that export default the variable myTheme?

The 2nd file you are refering to is an entire export default.
On line 5 :
export default {
// Badge
badgeBg: '#ED1727',
badgeColor: '#fff',
...
}
So when they do import myTheme from '../../themes/base-theme; the myTheme is the variable name they chose for the imported module. In this case, the transpiler is going to look for the default export.
If they would have done import { myTheme } from '../../themes/base-theme; then there would have been an issue since it is not explicitly named in the export. Doing this is not refering to the default export but rather the one explicitly called myTheme
I am not sure I made sense, you may want to give https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/import a read

Exporting without default means it's a named export.
You can have multiple named exports in a single file.
Example 1:
export class Theme {}
Here you have to import this export using its exact name.
To use this component in other file you should do this,
import { Theme } from '../../themes/base-theme'
Example 2:
If you export as the default export as,
export default class Theme {}
Then in another file you import the default export without using the { }, like this,
import Theme from '../../themes/base-theme'
There can only be one default export per file.
Although its React's convention to export one component from a file, and to export it is as the default export.
You're free to rename the default export as you import it.
import myTheme from '../../themes/base-theme'

Related

Importing React Components and Images with require()

In React, what are the differences between loading an image vs. loading a component using require()?
When I load an image using require("image path"), it works. When I load a React component using require("component") I get an error.
For images in React, You need to require
<img src={require('../assests/logo.png')} />
But it is totally different case with components. You import React components bases on how you exported.
And use ES6 to import and export in reactjs
And there are two types of exports
Named Export
Named exports are useful to export several values at ones. During the import, it is important to use the same name.
// how to export
export function myfunc() {}
// how to import
import { myfunc } from './myfile';
Default export.
Default exports are useful to export only a single value. During the import, able to omit the curly bares and use any name.
// how to export
default export function() {}
// how to import
import anynameyouwant from './myfile';

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/

Receiving "Attempted import error:" in react app

I am receiving the following error when trying to run my React app:
./src/components/App/App.js
Attempted import error: 'combineReducers'
is not exported from '../../store/reducers/'.
Here's how I'm exporting combineReducers:
import { combineReducers } from 'redux';
import userReducers from './userReducers';
import articleReducers from './articleReducers';
export default combineReducers({
userReducers,
articleReducers
});
and here's how I'm importing it in App.js:
import { combineReducers } from '../../store/reducers';
What's incorrect in how I'm exporting combineReducers?
import { combineReducers } from '../../store/reducers';
should be
import combineReducers from '../../store/reducers';
since it's a default export, and not a named export.
There's a good breakdown of the differences between the two here.
i had the same issue, but I just typed export on top and erased the default one on the bottom. Scroll down and check the comments.
import React, { Component } from "react";
export class Counter extends Component { // type this
export default Counter; // this is eliminated
I guess I am coming late, but this info might be useful to anyone I found out something, which might be simple but important.
if you use export on a function directly i.e
export const addPost = (id) =>{
...
}
Note while importing you need to wrap it in curly braces
i.e. import {addPost} from '../URL';
But when using export default i.e
const addPost = (id) =>{
...
}
export default addPost,
Then you can import without curly braces i.e.
import addPost from '../url';
export default addPost
I hope this helps anyone who got confused as me. 🙂
This is another option:
export default function Counter() {
}
Take into consideration that if you are using a named export you don't need curly brackets:
export const Component
->
import {ComponentName}
Only the default exported component be imported with curly brackets:
export default
->
import ComponentName
Maybe i'm late too but i had a similar problem with folders inside of component folder. i changed the folder's name with Capital letter. it worked for me.
If changing the import doesn't help maybe you just need to run yarn install or npm install (or whatever you're using) and restart your server. Worked for me.
Be sure to Capitalize the name of the constant variable you're exporting inside the component. When you Import the component elsewhere you should also check that its first letter is capitalized since this is one of the ways React uses to identify its components.
inside component:
import React from 'react';
export const Component = (props) => (...)
And then, when importing:
import {Component} from '../location/file'
Consider checking for any file renamings that git hasn't been instructed to track with git mv

importing a new installed module in my react app

I installed a module using npm install into my react project
npm install mdbreact --save
I checked then the nodemodules folder to make sure the lib was installed correctly and yes.
Now I am trying to import some components from the new lib like Input and Button
I am trying
import * as MDB from 'mdbreact';
import Input from 'mdbreact';
and I always get the error error TS2307: Cannot find module 'mdbreact'
Any help how to solve this? Thank you!
It might be helpful to look at how functions and variables are exported, so that you can see how they are imported.
I will explain further, but here are the docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
To export the default variable/function from a file you would use the export default phrase.
var testObj = { 'hello' : 'world' };
export default testObj;
To import the default variable/function from a file you would do it like so:
import testObj from './testFile';
To export a standard variable/function from a file you would use the standard export keyword.
var testObj = { 'hello' : 'world' };
var testObj2 = { 'hello' : 'again' };
export { testObj, testObj2 };
// or if you just want to export testObj - notice the default keyword is missing
export testObj;
To import a standard variable/function from a file you must wrap the imported variable/function inside braces.
TL;DR;
Only the default exported variable/function from a file can be imported without braces, anything else must be imported from within braces. Input is not the default export from mdbreact which is why it must be imported like so:
import { Input } from 'mdbreact';
* will import all available exports from the file, which is why that allowed your import to work. but you don't want to import all components from mdbreact on every file use mdbreact in or your project would become bloated very quickly.

Immediate ES6 export (React, Webpack, Babel)

At the root of a directory (e.g. components/, containers/), I have an index.jsx file which immediately exports out all components, so that I can import them like so:
import {SampleOne, SampleTwo} from '../components'.
However, the root index.jsx file doesn't work with the following:
import SampleOne from './SampleOne/SampleOne';
import SampleTwo from './Sample/SampleTwo';
export default {
SampleOne,
SampleTwo
};
So, I converted it to the following (which is basically the same):
export {default as SampleOne} from './SampleOne/SampleOne';
export {default as SampleTwo} from './SampleTwo/SampleTwo';
This works, however, I get this warning:
Can't make class (SampleOne & SampleTwo) hot reloadable due to being read-only.
To fix this you can try two solutions. First, you can exclude files or directories
(for example, /node_modules/) using 'exclude' option in loader configuration.
Second, if you are using Babel, you can enable loose mode for `es6.modules` using
the 'loose' option. See: http://babeljs.io/docs/advanced/loose/
and http://babeljs.io/docs/usage/options/
After a lot of head-banging, we replaced
export {default as SampleOne} from './SampleOne/SampleOne';
export {default as SampleTwo} from './SampleTwo/SampleTwo';
with
import {default as SampleOne} from './SampleOne/SampleOne';
import {default as SampleTwo} from './SampleTwo/SampleTwo';
export {SampleOne, SampleTwo};
and that seems to be working for us.
I had the same problem since I'm using a index.js in each modules to export all submodules like this:
export {default as SampleOne} from './SampleOne/SampleOne';
export {default as SampleTwo} from './SampleTwo/SampleTwo';
According to the discussion in the react-hot-loader repo, you can either ignore it(since it still got loaded) or don't re-export the modules.

Resources