I was just getting into react and trying it out for myself. After hours of configuring webpack just to get a hello world on my screen I thought I could get going now but after trying to render another component from a file the next problem.
My main file is app.js, which renders everything:
import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';
ReactDOM.render(
<Hello/>,
document.getElementById('app')
);
The Hello component comes from my hello.js in the same folder:
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
It was rendering fine when I was doing everything just in app.js without the import/export. It also compiles fine. But there are a lot of errors now in the console. So what am I missing?
Thanks
Gerd
The React. js "Attempted import error 'X' is not exported from" occurs when we try to import a named import that is not present in the specified file. To solve the error, make sure the module has a named export and you aren't mixing up named and default exports and imports.
Use named exports to export a component in React, e.g. export function Button() {} . The exported component can be imported by using a named import as import {Button} from './another-file. js' . You can use as many named exports as necessary in a file.
You can use this approach to import and use png , svg , webp , jpg , etc, images in your React app. Copied! What is this? If your images are located in the public directory, use an absolute path when setting the src prop on the img element.
Use named exports to export multiple components in React, e.g. export function A() {} and export function B() {} . The exported components can be imported by using a named import as import {A, B} from './another-file' . You can have as many named exports as necessary in a single file.
You might have noticed above that the code snippets don't actually include React in the project with import React from'react';. This will throw an error if you're working with React locally. However, if you're using a CDN to load React, it's available globally and you don't need to import it like above.
If you use incorrect capitalization, the errors you’ll get might not clearly state what the problem is. When importing from react and react-dom, make sure that you’re importing the correct names and what you’re using is exactly the same as what you’re importing.
Once you get a hang of it, you can break up your application into reusable components and include them all over your project. The problem is that there are a few gotchas that make working with components difficult for those new to React.
The Context Provider is meant to wrap your consumer components with it so that the context will be made available to all components wrapped by it. First we have a Card component that renders our card component containing our counter and buttons to increment and decrement it. The useContext call brings in AppContext into this component.
Because your export is default
you don't need braces around your import component name:
import Hello from './hello';
Here's a verbose technical article from Axel Rauschmayer on the final ES6 modules syntax that you might find useful.
And here's a slightly less techy post about the same topic.
when you import the default class you use
import ClassName from 'something';
and when you import other classes you use
import {ClassName} from 'something';
an example:
in hello.js file
import React from 'react';
class Hello extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
class Other extends React.Component{
render(){
return (
<h1>Hello, world!</h1>
)
}
}
export default Hello;
export Other;
in other file
import Hello, {Other} from './hello';
tip: you could also import the default class with other name
import Component, {Other} from './hello';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With