i use in my project #material-ui and react-hot-loader.
Hot loader works fine, but if i use material-ui modules, it not works.
import React from 'react';
import { hot } from 'react-hot-loader';
import DeleteIcon from '#material-ui/icons/Delete'; // TODO
const App = () => {
return (
<div>
text
</div>
);
};
export default hot(module)(App);
May be, someone know, why? What i need for a correct working? It problem only with #material-ui.
Thanks you for attention!
Related
Trying to use FontAwesome icons on React but I am having some issues on importing the files correctly.
First I installed some dependencies and I am now able to import the component as follow
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faTrash } from "#fortawesome/free-solid-svg-icons";
and use it (succesfully) as
<FontAwesomeIcon icon={faTrash} />
However, the icon I would like to use is this one ( icon ) but I can't seem to be able to actually import it. If I try import { faThin } from "#fortawesome/free-solid-svg-icons"; it doesn't work and if I try import { faThin } from "#fortawesome/free-thin-svg-icons"; it doesn't neither.
Any ideas?
That font is part of the light package (fa-light fa-trash), so you will need:
#fortawesome/pro-light-svg-icons
and a subscription to pro.
I have tried react-bootstrap components but it is not working. I have installed it perfectly but I do not know where is the problem.
App.js
import './bootstrap.min.css';
import Button from 'react-bootstrap/Button';
function App() {
return (
<Button>
Hello
</Button>
);
}
export default App;
Error On the Browser
I tried many solutions but none is working.
It's working. Maybe you are importing the file import './bootstrap.min.css'; wrong. Can you confirm?
I tried with this code:
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Button from 'react-bootstrap/Button';
function App() {
return <Button>Hello</Button>;
}
export default App;
Output:
make sure that you are install bootstrap library in project folder not out side it
cd (your project name)
and install it
Happy coding
I'm working on shopping Cart app, I want to use a Modal Form to display the cart's content and additional options before place the order, that's why I'm using Portals, so far, the source code of my Modal.js looks like this:
import { Fragment } from 'react';
import ReactDOM from 'react';
//import ReactDOM from 'react-dom/client';
import classes from './Modal.module.css';
const Backdrop = (props) => {
return <div className={classes.backdrop} onClick={props.onClose}/>;
};
const ModalOverlay = (props) => {
return (
<div className={classes.modal}>
<div className={classes.content}>{props.children}</div>
</div>
);
};
const portalElement = document.getElementById('overlays');
const Modal = (props) => {
return (
<Fragment>
{ReactDOM.createPortal(<Backdrop onClose={props.onClose} />, portalElement)}
{ReactDOM.createPortal(
<ModalOverlay>{props.children}</ModalOverlay>,
portalElement
)}
</Fragment>
);
};
export default Modal;
When I tried to load the modal form -clicking on an icon- I get this error:
This is the React's version I'm using:
This code used to work on previous version of React (17.x), the weird thing I tried to downgrade but still getting the same error.
My questions are:
In ver 18.x of React, Portals have been changed?
How can I downgrade React properly in order to test my code?
do you have any other suggestions how to overcome this issue using React's 18?
Thanks a lot
I had same error and I solved by importing
import ReactDOM from 'react-dom';
instead of
import ReactDOM from 'react-dom/client';
I created a typescript react app and installed ant design in it. Upon calling the Button Element just like in the their documentation I am getting this error. I looked up everywhere but I am not getting any solution for my problem.
this is my React Code.
import { FC } from 'react';
import { Button } from 'antd'
import './App.css';
const App: FC = () => {
return (
<div className="App">
<Button type='primary'>Button</Button>
</div>
);
}
export default App;
I think this is ant design related. Thanks for anyone who can help.
I'm attempting to add an SVG to a React app (built with create-react-app). When I try to add it as a component, I get an error like this:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.
What am I missing?
Code:
import React from 'react';
import Logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
export default Header;
You can import it this way:
import { ReactComponent as Logo } from '../img/logo.svg';
as said in CRA (create-react-app) documentation
an render it the way you want:
import React from 'react';
import { ReactComponent as Logo } from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
And also, if it's not necessary to render it as a component, you could just render your svg as an image this way:
import React from 'react';
import logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<img src={logo} alt="logo"/>
</div>
)
}
export default Header;
You need to import the component using this syntax:
import { ReactComponent as Logo } from '../img/logo.svg';
Using the curly braces and ReactComponent is necessary - they tell React that you want to build a component with the SVG.
I only found this because of a Dan Abramov reply to a create-react-app issue. The link he posted in his comment no longer works, but it's still mentioned in the docs.
https://github.com/facebook/create-react-app/issues/5293
https://create-react-app.dev/docs/adding-images-fonts-and-files/