I'm new to React and facing issues when I want to output "my hello welcome to react". I have gone through documents and youtube videos still can't identify fault.Here is the code:
import React, { Component } from 'react';
import logo, { ReactComponent } from './logo.svg';
import './App.css';
import ReactDom from "react-dom";
class Layout extends React.component {
render(){
return(
<h1>hello welcome to reactjs</h1>
);
}
}
let app = document.getElementById("root")
ReactDom.render(<Layout/>, app)
export default App;
Here is the compile error from the compiler
Failed to compile
./src/App.js
Line 20:16: 'App' is not defined no-undef
Your code won't compile properly since App is not defined.
export default App;
You probably wanted to export Layout.
export default Layout;
Either remove this line
export default App;
or
change the line to this
export default Layout;
Basically, you are getting this error because you're trying to export App component and in the current file there isn't any component exist named App
Your code won't compile properly since App is not defined.
export default App;
You probably wanted to export Layout.
export default Layout;
You don't need to export anything. You're rendering the Layout component in the DOM directly.
Please delete this line and try.
export default App;
Change Your class component name to
export default Layout;
it will work
Related
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.
hey i was watching the youtube video in it he was trying the new way of linking for hime it works and for me it shows the error video link :https://www.youtube.com/watch?v=khJlrj3Y6Ls time stamps are from 12:00 to 13:29 and the folder structure is also the same
error showing is :
Module not found: Can't resolve './Component' in 'C:\Users\dell\OneDrive\Desktop\react learn\covid-19\src'
and the app.js is
import React, { Component } from 'react';
import {Cards,Charts,CountryPicker} from './Component';
class App extends Component {
render() {
return (
<div>
<h1>here is me the app</h1>
</div>
);
}}
export default App;
index.js in component folder is
export {default as Cards } from './Cards/Cards';
export {default as Charts } from './Charts/Charts';
export {default as CountryPicker } from './CountryPicker/CountryPicker';
and i have checked tons of time myself but couldn t do something
folder structure is :https://ibb.co/vXy4ssf
You misspelled your folder name. You should import your components from './Components' instead of './Component'
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'.
enter code here
export default connect(
mapStateToProps,
{ fetchPosts, fetchUsers }
)(PostList);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
./src/components/App.js
Cannot find file: 'Postlist.js' does not match the corresponding name on disk: '.\src\components\PostList.js'.
Instead of using conventional export before class name I exported it through the connect function of react-redux. I am new to redux and still don't completely understand how the connect function works.
> import React from "react";
import PostList from "./PostList";
const App = () => {
return (
<div className="ui container">
<PostList />
</div>
);
};
export default App;
I know this is a late reply, but I managed to resolve the problem. The problem was that I was hosting it on Heroku and I hadn't done git add . or git add .\src\components\PostList.js in your case.
Although your code is incomplete, it seems a typo: you are importing Postlist (with lowercase "l") and exporting PostList (with uppercase "L"). You need to import PostList with uppercase in App.js.
import PostList from './PostList';
1) As I can see that both App.js and PostList.js are in the same folder user can
use the above line of code will work fine.
2) You should Import the component as you have exported. ( Import / export case sensitive)
I'm playing around with React and ES6 using babel and webpack. I want to build several components in different files, import in a single file and bundle them up with webpack
Let's say I have a few components like this:
my-navbar.jsx
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}
main-page.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import MyNavbar from './comp/my-navbar.jsx';
export class MyPage extends React.Component{
render(){
return(
<MyNavbar />
...
);
}
}
ReactDOM.render(
<MyPage />,
document.getElementById('container')
);
Using webpack and following their tutorial, I have main.js:
import MyPage from './main-page.jsx';
After building the project and running it, I get the following error in my browser console:
Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.
What am I doing wrong? How can I properly import and export my components?
Try defaulting the exports in your components:
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export default class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}
by using default you express that's going to be member in that module which would be imported if no specific member name is provided. You could also express you want to import the specific member called MyNavbar by doing so: import {MyNavbar} from './comp/my-navbar.jsx'; in this case, no default is needed
Wrapping components with braces if no default exports:
import {MyNavbar} from './comp/my-navbar.jsx';
or import multiple components from single module file
import {MyNavbar1, MyNavbar2} from './module';
To export a single component in ES6, you can use export default as follows:
class MyClass extends Component {
...
}
export default MyClass;
And now you use the following syntax to import that module:
import MyClass from './MyClass.react'
If you are looking to export multiple components from a single file the declaration would look something like this:
export class MyClass1 extends Component {
...
}
export class MyClass2 extends Component {
...
}
And now you can use the following syntax to import those files:
import {MyClass1, MyClass2} from './MyClass.react'
MDN has really nice documentation for all the new ways to import and export modules is ES 6 Import-MDN . A brief description of it in regards to your question you could've either:
Declared the component you were exporting as the 'default' component that this module was exporting:
export default class MyNavbar extends React.Component { , and so when Importing your 'MyNavbar' you DON'T have to put curly braces around it : import MyNavbar from './comp/my-navbar.jsx';.
Not putting curly braces around an import though is telling the document that this component was declared as an 'export default'. If it wasn't you'll get an error (as you did).
If you didn't want to declare your 'MyNavbar' as a default export when exporting it : export class MyNavbar extends React.Component { , then you would have to wrap your import of 'MyNavbar in curly braces:
import {MyNavbar} from './comp/my-navbar.jsx';
I think that since you only had one component in your './comp/my-navbar.jsx' file it's cool to make it the default export. If you'd had more components like MyNavbar1, MyNavbar2, MyNavbar3 then I wouldn't make either or them a default and to import selected components of a module when the module hasn't declared any one thing a default you can use: import {foo, bar} from "my-module"; where foo and bar are multiple members of your module.
Definitely read the MDN doc it has good examples for the syntax. Hopefully this helps with a little more of an explanation for anyone that's looking to toy with ES 6 and component import/exports in React.
I Hope this is Helpfull
Step 1: App.js is (main module) import the Login Module
import React, { Component } from 'react';
import './App.css';
import Login from './login/login';
class App extends Component {
render() {
return (
<Login />
);
}
}
export default App;
Step 2: Create Login Folder and create login.js file and customize your needs it automatically render to App.js Example Login.js
import React, { Component } from 'react';
import '../login/login.css';
class Login extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default Login;
There are two different ways of importing components in react and the recommended way is component way
Library way(not recommended)
Component way(recommended)
PFB detail explanation
Library way of importing
import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';
This is nice and handy but it does not only bundles Button and FlatButton (and their dependencies) but the whole libraries.
Component way of importing
One way to alleviate it is to try to only import or require what is needed, lets say the component way. Using the same example:
import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';
This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.
If you are not using lot of components then it should reduce considerably the size of your bundled file.