import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
function App() {
return (
<div className="App">
<Greet />
</div>
);
}
export default App;
This is the code in App.js. I have made an other file of greet to run it and display the name.
This is the Greet.js code
import React from 'react'
function Greet(){
return <h1> Hello Nabeel </h1>
}
export default App;
There are 1 warring and 2 errors.
-src\App.js
Line 3:8: 'Greet' is defined but never used no-unused-vars
-src\components\Greet.js
Line 2:10: 'Greet' is defined but never used no-unused-vars
ERROR in ./src/index.js 12:33-36
export 'default' (imported as 'App') was not found in './App' (module has no exports)
ERROR in [eslint]
src\components\Greet.js
Line 6:16: 'App' is not defined no-undef
What i should i do?
The Error message is already obvious, please remember to define your function.
Greet.js:
import React from 'react';
function Greet(){
return <h1> Hello Nabeel </h1>
}
export default Greet;
Related
I'm starting a small react project (beginner) and when I cut my 'App' component into many small components, such as 'header', it doesn't work. The error started to happen as soon as I cut my header. And to say that the header css doesn't load either. You can see in the element inspector that the React component is present, but it doesn't want to load the css associated with it.
// In App.js
import React from 'react';
import header_type from './header';
class App extends React.Component {
render() {
return (
<div className="window">
<div className="window-body">
<header_type/>
<div className='window_inner'>
<div className="column_left">
</div>
<div className="column_right">
</div>
</div>
</div>
</div>
)
}
}
export default App;
// In header.js
class header_type extends React.Component {
render() {
return (
<div className="window-header" >
</div>
)
}
}
export default header_type;
// In index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/components/App';
import '../src/style/window.css';
ReactDOM.render(
<App />, document.getElementById('root')
);
// error :
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
WARNING in src\components\App.js
Line 2:10: 'header_type' is defined but never used no-unused-vars
webpack compiled with 1 warning
Thank you in advance for the answers. Have a nice day.
one issue that is present in the above is code is you are exporting a default component from header.js, and importing it as named export in App.js.
In your App.js while importing header component import it as
import header_type from './header';
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
I am trying to import a function from another file in react, but it says that my function is not defined
in Todolist.js:
import React from 'react';
export default function TodoList() {
return (
<div>
<h1>Todo List</h1>
</div>
)
}
In App.js:
//import react from 'react';
import React from 'react';
import {Todolist} from "./TodoList";
function App() {
return (
<TodoList />
)
}
export default App;
the result:
WARNING in src\App.js
Line 3:9: 'Todolist' is defined but never used no-unused-vars
ERROR in src\App.js
Line 8:6: 'TodoList' is not defined react/jsx-no-undef
change to default import
import Todolist from "./TodoList";
because you use export default ....
the import should be like this.
import Todolist from "./TodoList";
There are two ways to do import/export in es6:
Default Export (Can have only one default export)
Named Export (Can have zero or more named exports)
If a component/module is a default export then it is required to import it without brackets.
// Default Export.
export default App;
// Import above default export without curly braces.
import App from './path/to/your/App';
If a component/module is a named export then it is required to import it with curly braces.
// Named Export.
export A = 'Test String';
export {YourComponent};
// Import above named export with curly braces.
import {A} from './path/to/A';
import {YourComponent} from './path/to/YourComponent';
as mentioned you need to look at the named/ default export choice. Also, there is a typo in the import of TodoList - the 'l' should be capitalised.
I am unable to use my npm component package that i have created.
I have published the package successfully but when i am using it in a fresh code it is showing this error "SyntaxError: /home/trinendra/Desktop/react-test/node_modules/iconbox1/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (6:17)"
My package name:"iconbox1"
My npm package code is here:
import React,{Component} from "react"
class Welcome extends Component{
render(){
return (
<input type="text" placeholder="Your name"></input>
)
}
}
module.exports.Welcome = Welcome;
And i am using it here in my main app:
import logo from './logo.svg';
import './App.css';
import {Welcome} from "iconbox1"
function App() {
return (
<div className="App">
<Welcome></Welcome>
</div>
);
}
export default App;
enter image description here
Might be good not to mix ES5 and ES6. This might be happening because of the way you are exporting your Component.
There is a render(){} function missing in your App component.
Try exporting Your welcome component using export {Welcome} or export default Welcome, but make sure to remove the brackets around welcome in your app component if you are using the second option
You are using both ES6 and ES5 syntax for importing and exporting.
Try this code instead Here's a Screenshot of the output. It's working for me
Check the name of the file is iconbox1 or not
import React,{Component} from "react"
class Welcome extends Component{
render(){
return (
<input type="text" placeholder="Your name"></input>
)
}
}
export default Welcome;
// import logo from './logo.svg';
import './App.css';
import Welcome from "./iconbox1"
function App() {
return (
<div className="App">
<Welcome></Welcome>
</div>
);
}
export default App;
welcome.js
import React, { Component } from 'react'
class welcome extends Component
{
render()
{
return <h1>Class Component</h1>
}
}
export default welcome
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import welcome from './components/welcome'
function App() {
return (
<div className="App">
<Greet />
<welcome />
</div>
);
}
export default App;
So basically in welcome.js i have a code for rendering hello rahul and i have exported that and i have imported that in App.js but it showing welcome is declared but never used please help
You have a problem with naming. React assumes every tag beginning with a small letter is native (f ex a <div> or <table>). You have to name your own components with capital letters.
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome'
function App() {
return (
<div className="App">
<Greet />
<Welcome />
</div>
);
}
export default App;
It's also a good idea to name your files with components with capital letters, to make them easy to identify.
You are importing a component in lower case letters. React doesn't recognize that as a component. So just restructure it as :
import Welcome from './components/Welcome'
then do
<Welcome/>
I'm trying to create a React App.. largely my attempts so far are based on the default application from create-react-app. Here's my App.js:
import React from 'react';
import './App.css';
import './Components/MyComponent';
function App() {
return (
<div className="App">
<MyComponent/>
</div>
);
}
export default App;
MyComponent is defined here:
import React from 'react';
import img from './Assets/img.png';
import imgComponent from './MyImage';
class MyComponent extends React.Component {
render() {
return
<div>
<imgComponent imageProp={img} />
</div>
}
}
export default MyComponent;
When I run this, I get the error:
./src/App.js
Line 8: 'MyComponent' is not defined react/jsx-no-undef
Please could someone tell me why I'm getting this error? I was under the impression that a combination of the import in App.js and the export default in MyComponent was all that was needed to use the component.
In the App.js you added MyComponent to the render method, but MyComponent is not defined in your code (as the error message says).
Just change your third import:
import './Components/MyComponent';
To:
import MyComponent from './Components/MyComponent';
So you got the component you are using in your render function.
I hope it helps!
When we are doing export default Mycomponent, we are exposing the Mycomponent module to other modules. But we require a local name to access the contents. For a default export, it doesn't have to be the same as export. A simple import statement should look like import name from 'module'.
In your case, it will be
import MyComponent from './Components/MyComponent'.