I have been following a React course online. When the course talked about hooks in React, I saw this sample code:
import AlertContext from '../../context/alert/alertContext'
But when I went to alertContext.js module, I noticed the default exported module object is alertContext, the object name started with "a" instead of "A". The code is like export default alertContext.
Does it mean import is case insensitive?
When you have a default export on a custom component, you can import it with any name you like.
default export can have any name inside it and can be imported with any other name on other components.
But its important to import the custom component with UpperCase as React understands uppercase as a custom component and lower case as a native component.
Native Components => <div> , <p>, <input> etc
Custom Components => <AlertContext>
Example:
/*customComponent.js*/
const customComponent = () => <div> I am Custom </div>
export default customComponent;
/*App.js*/
import MyCustomComponent from './customComponent'
const App = () => <MyCustomComponent />
export default App;
Related
I am very new to react and having a bizarre problem. I have defined a stateless function and when i want to try to import it in my main component it is not loading the function. i am guessing there is a naming convention that i dont know of. npm start does not give any error so I am assuming the code is compiling ok.
My stateless component is below
import React from 'react';
const AppHeader = () => {
return(
<div class="jumbotron text-center">
<h1>Map Search</h1>
<p>Searching map for nearest matches from account</p>
</div>
);
}
export default AppHeader;
below does not work,
import React from 'react';
import './App.css';
import appHeader from './UI/appHeader';
class App extends React.Component {
render(){
return (
<div className="App">
<appHeader/>
</div>
);
}
}
export default App;
VS code lint says
appHeader is declared but its value is never used.
However below does work,
import React from 'react';
import './App.css';
import KKK from './UI/appHeader';
class App extends React.Component {
render(){
return (
<div className="App">
<KKK/>
</div>
);
}
}
export default App;
VS code lint does not show the error anymore also the app is working as expected. As you can see i only changed the name of the appHeader component to KKK. can someone point out what am i doing wrong and may be provide any documentation around this.
You need to capitalize appHeader to be AppHeader in order for React to understand that this is a custom component and not a built in html component. Components that start with lowercase are assumed to be built in HTML elements.
Check out this answer: ReactJS component names must begin with capital letters?
And from the React docs:
User-Defined Components Must Be Capitalized
When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
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'.
I am getting the "Empty object" in React console when rendering the Container component into the App component.
1,user-list.js: This is my container component.
import React , {Component} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
class userList extends Component {
render() {
return (
<div>
<h1>sample</h1>
</div>
);
}
}
export default userList;
2,App.js: This is my App file this is where I am trying to display the "userList " but "sample" is not displayed in the browser.
import React from 'react';
import userList from '../containers/user-list';
require('../../scss/style.scss');
const App = () => {
return (
<div>
<h2>User List</h2>
<userList />
<hr />
<h2>User Details</h2>
</div>
);
}
export default App;
Please correct me if I am missing something?
I solve your problem with only one single small step: Changing the userList into UserList.
import React from 'react';
import UserList from '../containers/user-list';
const App = () => {
return (
<div>
<h2>User List</h2>
<UserList />
<hr />
<h2>User Details</h2>
</div>
);
};
export default App;
The reason is "React treats components starting with lowercase letters as DOM tags". From the Official React Document:
React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.
The reason behind this convention:
User-Defined Components Must Be Capitalized
When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a
component that starts with a lowercase letter, assign it to a
capitalized variable before using it in JSX.
Try changing userList to UserList, with capital U.
In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.
So the problem is your userList begins with small u. You should change it while exporting as well as wherever you are using it. Look at the below code to see where it needs to be corrected.
class UserList extends Component
export default UserList;
import UserList from '../containers/user-list';
<UserList />
I have the following simple component:
import React from 'react'
import '../css.scss'
export default (props) => {
let activeClass = props.out ? 'is-active' : ''
return (
<div className='hamburgerWrapper'>
<button className={'hamburger hamburger--htla ' + activeClass}>
<span />
</button>
</div>
)
}
When I look for it in the react dev tools, I see:
Is this because I need to extend React component? Do I need to create this as a variable and do so?
This happens when you export an anonymous function as your component. If you name the function (component) and then export it, it will show up in the React Dev Tools properly.
const MyComponent = (props) => {}
export default MyComponent;
I realise the original question has been correctly answered already, but I just wanted to note a very similar issue you may encounter if using React.memo() or similar function. Consider the following code:
const MyComponent = React.memo(props => <div>Hello</div>)
export default MyComponent
The component will still display as Anonymous in devtools and certain React error messages (e.g. prop-types validation).
Ensuring that the Component is defined before trying to memoise it resolves this issue, e.g:
const MyComponent = props => <div>Hello</div>
export default React.memo(MyComponent)
To add to Michael Jaspers answer, if you want to use a named import (instead of default export), you can do like so:
const MyComponent = props => <div />
export { MyComponent }
The component will show in React DevTools with the correct name.
Note: If you had exported the expression directly:
export const MyComponent = props => <div />
This would then show as Anonymous or Unknown in React DevTools
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.