Importing React Components and Images with require() - reactjs

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';

Related

What happens if two components import the same CSS file in React?

Let's say I have two React components:
import { React } from "react";
import "./styles.css";
function ComponentA() {
...
}
export default ComponentA;
import { React } from "react";
import "./styles.css";
function ComponentB() {
...
}
export default ComponentB;
Both of these components are importing the same CSS file styles.css. Now let's say that in my app, I'm importing both of these components, so App.js looks something like this:
import { ComponentA } from "./ComponentA";
import { ComponentB } from "./ComponentB";
function App() {
return (
<div className="App">
<ComponentA />
<ComponentB />
</div>
);
}
export default App;
What exactly happens here? Does my app import the same CSS file twice? And if so, do I just make the import on the App.js file instead?
It's as if it was only imported once.
When a module bundler like Webpack sees an import, it puts the following path in the list of files to process, if the path doesn't exist already. The file is only processed once, no matter how many times it's imported.
Note that with React apps, you will often see
import React from "react";
in tens or hundreds of files - React isn't created anew hundreds of times. Rather, the module is processed once, and then files that import it are given access to what React has exported.
Importing CSS files works the same way, in that they're only processed once no matter how many times an import exists for them (though they don't really have exports, just side-effects).
If both ComponentA and ComponentB depend on styles.css, feel free to keep importing styles.css in both - it doesn't hurt, and will make things easier to manage when you can see at a glance that both components directly depend on that CSS.

how to export multiple classes in react

Hello i'm trying to export multiple classes in react so they can be all rendered in one page. My group makes each handled a component and now where tying to bring it all together. Problem is that when we try to combine the classes we get errors that they have already been declared. Its all a learning process and while looking for solutions we saw that you can import the components and have them rendered but even looking through documentation we were a bit confused.
import styles from './ViewJobsList.css';
import { Helmet } from 'react-helmet';
import { compA, compB} from './App.js';
class compA extends React.Component {...};
class compB extends React.Component {...};
export default { compA, compB};
Now each class works on its own but together when put like this we get
Parsing error: Identifier 'compA' has already been declared
How can we export these two classes and 1 more in the future?
If you take out this line:
import { compA, compB} from './App.js';
It'll work.
The reason it's not working at the moment is because you're importing and declaring the functions in the same file. You only want to declare or import - not both.
You only want to use an import statement in files where you want the functions to be pulled across from a new file. Export is used on the file where the functions are declared.
Edit: So to import and export how you want, you need to phrase it like this:
In your app.js, you need to phrase it like:
export { compA, compB };
In your index.js, you then need to:
import { compA, compB } from "./app.js"
**Note!! If your app.js is in a different folder, i.e. a components folder, you will need to add the folder route before app.js, so it would be like:
./components/app.js**
That should be all OK - assuming you have the React and appropriate dependencies imported.
Try and delete line 3 in your snippet viz import { compA, compB} from './App.js';

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

Are there any naming conventions to follow while working with boilerplate code import and export?

export default class SampleClass extends Component {
}
while importing this class which of the following is correct?
import sampleClass(same as class name) from '.module1'; or
import Myclass(Some custome name) from '.module1';
Your component:-
app.js
export default class App extends Component{
//
}
While importing components You should always import as it is:-
import App from "./components/app";
Since you have added redux as a tag so I might guess you arisen this question while working with reducers, if i am not wrong(really sorry if i am wrong).In case of reducers they always return some object (state) a reducer always look like this
reducer-post.js
export default function(){
//return []
}
So while importing reducers you can use any name just like this
import AnyReducer from "./reducers/reducer-post"
Since reducers are functions here so by default they are imported from it, but in the case of components, they were the class so we need to explicitly import them by name.
Using the same name is unnecessary for default exports, but becomes necessary in case of named exports.
So it's better to always use the name defined in export.

Importing a module in a React Native app

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'

Resources