score:139
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
score:3
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.
score:5
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;
score:10
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.
score:104
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'
score:107
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';
Source: stackoverflow.com
Related Query
- How to import and export components using React + ES6 + webpack?
- How to bundle ES6 based React components and keep the bundle in ES6, using webpack?
- How can I import a file using React.js, ES6 and Webpack based on the value of a prop?
- How to render react components by using map and join?
- How to import CSS modules with Typescript, React and Webpack
- Using React Router and Webpack 2 how to require external libraries only on certain routes?
- CDN links for React packages and how to import it when using react using the scripts from CDN
- Using Jquery and Bootstrap with Es6 Import for React App
- How to configure webpack in storybook to allow babel to import react components outside of project folder
- Import fonts to react project with webpack and styled components
- How to export function and import react hooks
- How to use inheritance with React components and es6 classes
- How to properly store React components in separate files and import React?
- How to export and import class properly in javascript ES6
- How to load npm module type definition in Monaco using Webpack and react create-react-app
- How to intercept back button in a React SPA using function components and React Router v5
- How can I build a React app with Webpack and import an assets folder?
- How import statement works in ES6 for React Components
- How can show and hide react components using hooks
- How to import components in React and edit them (Change their State)
- Using react external components and webpack
- How to use the useHook in the component rather than passing the value returned from it as a prop to the components using react and typescript?
- How to load styles onto React server-side using Webpack and go back to style-loader client-side?
- How to render output from react-html-email using React and Webpack
- How can I import multiple functions or components from a package using react lazy
- How to import a file using ES6 modules, and read its content as a string?
- How to efficiently add variants for components using styled-components and React
- How to use ES6 import and react in a sailsjs app?
- How import and export components (functions) in ReactJS?
- React Native: How to make modular components using local image and data assets?
More Query from same tag
- React App with craco doesn't start in docker-compose
- State variable of react component does not change after fetch
- How using types.d.ts file in React & TypeScript project
- django.contrib.auth.decorators login_required with django-rest-framework
- Pass react router path in onClick function
- React app not rerender after store state changed
- Using Ant Design and Moment Js, I'm still unable to figure out how can we sort columns using Dates?
- How does one select all child components (not DOM elements) used in a Reactjs component template?
- Converting dash's(plotly) react functional component into class component
- Trying to use "Socket.io-client" module in React throws error: Cannot assign to read only property 'exports' of object '#<Object>'
- Material UI Layout - 3 column
- Can't access this.state in other function
- CSS change where 100% is located
- Nested routing in react-router-dom V6
- Typewriter effect text glitch in react
- How to attach provider properly to the reactDOM.render
- Rendering same component twice in different pages in React
- Integration/Acceptance testing of a ReactJS App
- Can't access favicon from Production (Manifest: Line: 1, column: 1, Syntax error.)
- origin has been blocked by CORS policy Spring boot and React
- How to apply styles to props of multiple classes?
- Jest with React Native getting issue
- Unique Keys for Options in React
- Wrong git branch loaded in node_modules by yarn install command
- TypeError: formData.set is not a function
- Should i use normal tag when i am using style component?
- npm start command not working, when I try to run my React application
- Vertical alignment of text in a button with icon is not correct
- React Matrix of Radio buttons
- Sorting MongoDB data in GraphQL resolver (Meteor/React/Apollo)