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
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 been building a project on react using vscode and when i try to start it in the browser, I keep getting the error that it cant find the file index.js, even though it is in the right folder. (Yes I have imported react and not React). I have literally paused my project for a while day because of this and its weird because i was building a smaller project earlier on the same mahine, in the same way and it worked perfectly.
But I have no idea whats going on here, I have attached the code.
I tried moving the file around, checking my lowercase, deleteing the cache memory and restarting it, deleting the node modules folder and using npm insall, etc all that stuff already on stackOverflow but nothing works.
I am just starting out with react so I'm not sure what the problem is and I've tried googling as much as I could
Navbar.js:
import React from 'react'
import logo from './images/airbnb 1.png'
export default function Navbar(){
return (
<img src={logo} width= "40px"></img>
)
}
App.js:
import React from 'react'
export default function App(){
return(
<h1>App component</h1>
)
}
index.js:
import React from 'react'
import ReactDOM from 'react-DOM'
import App from './App'
import './index.css'
ReactDOM.render(<App />, document.getElementById("root"))
import ReactDOM from 'react-dom'
you are trying to import from react-DOM that does not exist
I'm following along to a youtube tutorial to learn the MERN stack. Currently i'm trying to import boostrap css in my App.js file. But i keep getting this error.
Error
Here is my App.js file
import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import './App.css';
import 'boostrap/dist/css/bootstrap.min.css';
class App extends Component {
render() {
return (
<div className="App">
<AppNavbar />
</div>
);
}
}
export default App;
I ran npm install --save boostrap before attempting to include it, ive also restarted the server. All to no avail. Is there a new way to include css from the node_modules folder?
If you are trying to import bootstrap into your react project. You can import the css file into your App.js like this.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
The import statement is not finding the file(s) do to the path passed in.
You have a typo, use this
import 'bootstrap/dist/css/bootstrap.min.css'
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!
I put the spinner on the page and I see nothing at all. There are no console of errors or anything like that.
Here is my code:
import React, { Component } from 'react';
import { Spin } from 'antd';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Spin />
</div>
);
}
}
export default App;
The accepted answer imports all of the library styles.
Here's a preferred way to do so
import Spin from 'antd/es/spin';
import 'antd/es/spin/style/css';
I believe you have forgotten to import the CSS for AndD.
#import '~antd/dist/antd.css';
https://ant.design/docs/react/use-with-create-react-app
The proposed solution by #HalfWebDev doesn't explain that why one should import the CSS at the component level.
Probably this is the reason Remove global Styles
But I would like to add that the proposed solution by #HalfWebDev still doesn't work. Which is to import the component level CSS only like this
import 'antd/es/spin/style/css';
The above CSS still continues adding some global styles and disturbs my styling.
Instead importing the CSS with this method worked for me
import 'antd/lib/spin/style/index.css';