I am trying to import Dashboard from LoginPage component.
I tried
import Dashboard from './scenes/Dashboard
import Dashboard from './Dashboard
import Dashboard from '../../Dashboard
but they all didn't work.
What is the correct way to import it?
If the component name is 'DashboardComponent' exported using export default, you can import by,
import DashboardComponent from '../Dashboard/DashboardComponent'
if it is not default export, it can be imported using {} as,
import {DashboardComponent} from '../Dashboard/DashboardComponent'
Related
Heavily using material-ui in my app, is there a way to avoid doing imports in each app component like this?
import Typography from "#material-ui/core/Typography";
import Box from "#material-ui/core/Box";
import Grid from "#material-ui/core/Grid";
import Container from "#material-ui/core/Container";
....
or this:
import {Typography, Box, Grid, Container} from "#material-ui/core";
Is there such thing like this? So that I don't need to import each component?
import * from "#material-ui/core"
Thanks in advance! :D
Yes, there is an import all in JavaScript. You can do it like so:
import * as Mui from '#material-ui/core';
This puts all of the named exports of #material-ui/core into the Mui "namespace". Then, you can easily access any of the components i.e.:
<Mui.Typography>Test</Mui.Typography>
You can read more about import here.
The first option is not much clean from an import statement perspective, especially when you want to import and use a lot of Mui components, but as you use path imports to avoid pulling in unused modules, gets an optimized bundle size automatically.
The second option (import * from "#material-ui/core"), on the other hand, is the most convenient from a development perspective, and also makes you have a clean import statement, but will make your application packages larger than they import each component separately depending on what part of components you are using.
Moreover, there is a large scale application you need to import from different sources of Material-ui:
import {} from '#material-ui/core';
import {} from '#material-ui/icons';
import {} from '#mui/material';
A better optimized approach, is to create a single file in your project where you import each component that you use individually, then export them all under a single namespace:
// src/mui/index.js
export { default as MenuItem } from '#material-ui/core/MenuItem';
export { default as TextField } from '#material-ui/core/TextField';
export { default as Select } from '#material-ui/core/Select';
export { default as ClearIcon} from '#material-ui/icons/Clear';
export { default as FormControl } from '#material-ui/core/FormControl';
export { default as Button } from '#mui/material/Button';
...
Then you can import that file wholesale into each component where you need it:
// ../../MyComponent.js
import {
MenuItem,
TextField,
Select,
ClearIcon,
FormControl
} from 'mui';
Now you have a clean import statement and optimized bundle size as well.
Working with absolute path: I never address components with a relative path (e.i ../../../mui). you can take a look here if you don't know how to use absolute path in React.
Hi you can do this in following way:
create a folder called collections
create a file called index.js under collections folder
write the following code in index.js
export {default as Button} from "#material-ui/core/Button";
export {default as Card} from "#material-ui/core/Card";
export {default as Paper} from "#material-ui/core/Paper";
now import collection like bellow:
import * as collections from './collections';
Your component file will be as:
import React, {Component} from "react";
import * as collections from './collections';
class Box extends Component {
render() {
return (
<div>
<collections.Button>
Test
</collections.Button>
<collections.Card>test</collections.Card>
<collections.Paper>test</collections.Paper>
</div>
);
}
}
export default Box;
I've received this template https://themeforest.net/item/light-admin-clean-bootstrap-dashboard-html-template/19760124 to implement an admin dashboard.
I started it in Angular 8, but I must move it to React.
The problem is that I'm not being able to get it working correctly in React.
In Angular, I setup like this inside angular.json:
"styles": [
"node_modules/select2/dist/css/select2.css",
"node_modules/bootstrap-daterangepicker/daterangepicker.css",
"node_modules/dropzone/dist/dropzone.css",
"node_modules/datatables.net-bs/css/dataTables.bootstrap.css",
"node_modules/fullcalendar/dist/fullcalendar.min.css",
"node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css",
"node_modules/slick-carousel/slick/slick.css",
"src/css/main.css",
"src/css/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/moment/moment.js",
"node_modules/chart.js/dist/Chart.min.js",
"node_modules/select2/dist/js/select2.full.min.js",
"node_modules/jquery-bar-rating/dist/jquery.barrating.min.js",
"node_modules/ckeditor/ckeditor.js",
"node_modules/bootstrap-validator/dist/validator.min.js",
"node_modules/bootstrap-daterangepicker/daterangepicker.js",
"node_modules/ion-rangeslider/js/ion.rangeSlider.min.js",
"node_modules/dropzone/dist/dropzone.js",
"node_modules/editable-table/dist/editable-table.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/datatables.net-bs/js/dataTables.bootstrap.js",
"node_modules/fullcalendar/dist/fullcalendar.min.js",
"node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js",
"node_modules/tether/dist/js/tether.min.js",
"node_modules/slick-carousel/slick/slick.min.js",
"node_modules/bootstrap/js/dist/util.js",
"node_modules/bootstrap/js/dist/alert.js",
"node_modules/bootstrap/js/dist/button.js",
"node_modules/bootstrap/js/dist/carousel.js",
"node_modules/bootstrap/js/dist/collapse.js",
"node_modules/bootstrap/js/dist/dropdown.js",
"node_modules/bootstrap/js/dist/modal.js",
"node_modules/bootstrap/js/dist/tab.js",
"node_modules/bootstrap/js/dist/tooltip.js",
"node_modules/bootstrap/js/dist/popover.js",
"src/js/demo_customizer.js",
"src/js/main.js"
]
},
It worked like a charm. But in React I'm getting a lot of warnings and errors.
I tried this inside App.tsx:
import 'select2/dist/css/select2.css'
import 'bootstrap-daterangepicker/daterangepicker.css'
import 'dropzone/dist/dropzone.css'
import 'datatables.net-bs/css/dataTables.bootstrap.css'
import 'fullcalendar/dist/fullcalendar.min.css'
import 'perfect-scrollbar/dist/css/perfect-scrollbar.min.css'
import 'slick-carousel/slick/slick.css'
import './assets/css/main.css'
import './assets/css/styles.css'
import 'jquery'
import 'popper.js'
import 'moment'
import 'chart.js'
import 'select2'
import 'jquery-bar-rating'
import 'ckeditor'
import 'bootstrap-validator'
import 'bootstrap-daterangepicker'
import 'ion-rangeslider'
import 'dropzone'
import 'editable-table'
import 'datatables.net'
import 'datatables.net-bs'
import 'fullcalendar'
import 'perfect-scrollbar'
import 'tether'
import 'slick-carousel'
import 'bootstrap'
import 'dragula'
import './assets/js/demo_customizer.js'
import './assets/js/main.js'
import React from 'react';
import Routes from './routes'
const App: React.FC = () => <Routes/>
export default App;
But I'm getting a lot of error, like:
ReferenceError: jQuery is not defined
./node_modules/bootstrap-validator/js/validator.js
... and so on.
Any idea how I can get this template working on React?
I'm new to React and started exploring bootstrap few days ago. But, whenever I'm trying to import something from react-bootstrap, it's throwing error.
I've already tried reinstalling react-bootstrap. But it doesn't solve the problem. These are my imports:
import React, { Component } from 'react';
import {Button} from 'react-bootstrap/Button'; <-- culprit
import logo from './logo.svg';
import './App.css';
import Chart from './components/Chart';
import axios from 'axios';
import {Typeahead} from 'react-bootstrap-typeahead'; <-- works fine
The error is in some line in the ThemeProvider.js, which comes with react-bootstrap.
TypeError: Object doesn't support property or method 'createContext'
15 |
16 | var _react = _interopRequireWildcard(require("react"));
17 |
> 18 | var ThemeContext = _react.default.createContext({});
19 |
20 | var Consumer = ThemeContext.Consumer,
21 | Provider = ThemeContext.Provider;
When you import something wrapped around with {}, it refers to something that is exported with an explicit name identifier.
In this case: import {Button} from 'react-bootstrap/Button' would mean that file has explicitly named one of their exports Button. But that's unlikely, because conventionally with these libraries, when you import from a specific file like /Button, they will almost always use a default export instead.
The solution would be to simply get the default export by doing:
import Button from 'react-bootstrap/Button'
With a default export, you can name the import anything you want, even something like this:
import MyButton from 'react-bootstrap/Button'
Alternatively, you can just import from the head folder. In that case, you would actually have to use {} to fetch the named items.
import {Button, Input, Form} from 'react-bootstrap';
try this:
import {Button} from 'react-bootstrap';
or:
import Button from 'react-bootstrap/Button'
and you need to install bootstrap css and import it:
1.
npm install bootstrap
2.
import "bootstrap/dist/css/bootstrap.min.css"
When you are importing a Button or any component wrapped around with curly braces, you do not need to include the component name after the backslash.
simply put
import {Button} from 'react-bootstrap/';
when we import a component without wrapped around with {}, we need to give the component name like this.
import Button from 'react-bootstrap/Button';
I've to use bootstrap-select, bootstrap, jquery, popper, isotope, wow and a script file that uses all these libs with Gatsby. I did like this in layout.js:
import React from "react"
import { StaticQuery, graphql } from 'gatsby'
import "bootstrap/dist/css/bootstrap.min.css"
import "./vendors/themify-icon/themify-icons.css"
import "font-awesome/css/font-awesome.min.css"
import "./vendors/flaticon/flaticon.css"
import "animate.css/animate.min.css"
import "./vendors/magnify-pop/magnific-popup.css"
import "./layout.css"
import "./responsive.css"
import "jquery/dist/jquery.min.js"
import "popper.js/dist/popper"
import "bootstrap/dist/js/bootstrap.min.js"
import "bootstrap-select/dist/js/bootstrap-select.min.js"
import "wowjs/dist/wow.min.js"
import "jquery.scroll-parallax/dist/js/jquery.scrollParallax.js"
import "./vendors/isotope/isotope-min.js"
import "./vendors/magnify-pop/jquery.magnific-popup.min.js"
import Loader from "./loader"
import Header from "./header"
import Breadcrumb from "./breadcrumb"
Is this a correct way to import all these dependencies ?
During gatsby develop I am not sure it works or not but I am not getting any errors. During gatsby build it failed. So, I copied all these files to static and build passed.
Then I checked for all these files in common.js but not a single file code is there. How do I use all these dependencies with Gatsby ?
This question already has answers here:
using brackets with javascript import syntax
(2 answers)
Closed 6 years ago.
Say, we are using React with ES6. We import React and Component as
import React from 'react'
import { Component } from 'react'
Why the syntax difference? Can't we use as specified below?
import Component from 'react'
Here are the docs for import.
import React from 'react'
The above is a default import. Default imports are exported with export default .... There can be only a single default export.
import { Component } from 'react'
But this is a member import (named import). Member imports are exported with export .... There can be many member exports.
You can import both by using this syntax:
import React, { Component } from 'react';
In JavaScript the default and named imports are split, so you can't import a named import like it was the default. The following, sets the name Component to the default export of the 'react' package (which is not going to be the same as React.Component:
import Component from 'react';
Component is a named export. e.g. Therefore, it must be destructured with {}.
React is a default export for React from 'react' is correct. e.g. export default React
If in any file you are exporting something by default with statement like export default React, then that can be imported like import React.
For other exports which are not default, we need to specify what we actually want to import by closing that in parentheses like import { Components}.