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
- Update multiple semantic ui react dropdown keys to state
- Can't pass state with Link compoment. Why is state undefined?
- React Material UI randomize/remove MUI class names
- How to Validate "Digit" Range on handle validation in ReactJS
- React Redux Call action within action and get return value
- Correct way to catch fetch errors in React?
- Using a property of initially undefined variable for useEffect dependency
- React reducer wrong increment number
- React Router v4 routes not working
- Is it possible to export react component as function in non-react project
- React Fire on Change event on load
- Get dynamically data from an object in React
- Deleting a list item when it's clicked in React
- Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_0__.app.auth is not a function
- How to set active tab in Tab from Material UI programatically
- React-Select Async loadOptions is not loading options properly
- onClick function not working for anchor tag
- Clarifai - FACE DETECT - Model does not exist
- React Formik checkbox group does not turn into an array of invidual checked or unchecked elements
- How to properly update a react native swiper component when state changes?
- How I navigate to the different routes when I am on the certain Route
- React : how to show my data from props in my menus section
- How to use Set with react's useState?
- Why are my react-router Links not working when put inside a Bootstrap 5 dropdown navbar button?
- Gatsby Config Not Changing Color Theme
- Display react component name in attribute
- React and Redux: Wrapping React Map Function with a HTML tag
- Want to show total of amount
- React Typescript - InferProps accepts null but JSX Attributes does not (i.e. id)
- Use Bootstrap Modal in React