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'
Related
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 am trying to create a React component and import it through a git URL.
My question is, how should the component be created?
How should I import it?
I didn't find much information
I've been reviewing this response
How can I import a component from GitHub repository
For example, i have this component
import React from "react";
function Title() {
return (
<div>
<h1>Sample Importing</h1>
</div>
);
}
export default Title;
To migrate it to the new git repo, should I initialize the project with CRA?
How do I give the directives to then do
npm install bitbuketurl..
import Title from '....'
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
You completed the following configuration:
npm run eject run this command inside project root directory.
search cssRegex and add the following lines under use: getStyleLoaders({
modules:true,
localIdentName:'[name]__[local]__[hash:base64:5]
Now I just test the following code:
import React from 'react';
import logo from './logo.svg';
import classes from './App.css';
function App() {
return (
<div className={classes.App}>
<p>hello</p>
</div>
);
}
export default App;
As far i did, <div className={classes.App}> this should be converted as like this: <div class="APP_local_ANYTHING">. But no class is being generated. Whats wrong is going on?
if that's all the code you've got, app is not bootstrapped. In order to do so, you would have to add the folowing piece of code:
import * as ReactDOM from 'react-dom';
import App from 'app'; // file with you App component
ReactDOM.render(<App />, document.getElementById('root')) // or any other selector in HTML you want to have your app attached to.
Simple Codepen example
I'm trying to get familiar with react and web development. And made my first steps.
Right now I'm using react with react-bootstrap & css modules.
In the main.html I had to include the bootstrap.css file.
I would like to replace my searchbar with react-autosuggest
It seems like bootstrap is breaking the style of react-autosuggest. Is it possible to combine both? Or is it a bad practice?
That is my code where I tried to use both searchbars:
import React, {Component} from 'react';
import styles from './App.css';
import Search from "./Search/Search"
import SearchAuto from "./SearchAuto/SearchAuto"
class App extends Component {
render() {
return (
<div>
<div className={styles.App}>
<h1>Title</h1>
<Search onSearch={this.searchForAddress}/>
</div>
<SearchAuto onSearch={this.searchForAddress}/>
</div>
);
}
}
export default App;
Any help would be greatly appreciated!