First of all, I am truly new in reactjs. I am trying to design my react project using bootstrap. For some reasons it's not working as it should be. Below is my code:
App.js
import React from 'react';
import './App.css';
import Menu from '../components/Menu/Menu';
function App() {
return (
<div className="App">
<Menu />
</div>
);
}
export default App;
Menu.js
import React from 'react'
import * as ReactBootstrap from 'react-bootstrap'
const Menu = () => {
return (
<div id="menu_container">
<ReactBootstrap.Navbar bg="dark" variant="dark">
<ReactBootstrap.Navbar.Brand href="#home">Navbar</ReactBootstrap.Navbar.Brand>
<ReactBootstrap.Nav className="mr-auto">
<ReactBootstrap.Nav.Link href="#home">Home</ReactBootstrap.Nav.Link>
<ReactBootstrap.Nav.Link href="#features">Features</ReactBootstrap.Nav.Link>
<ReactBootstrap.Nav.Link href="#pricing">Pricing</ReactBootstrap.Nav.Link>
</ReactBootstrap.Nav>
<ReactBootstrap.Form inline>
<ReactBootstrap.FormControl type="text" placeholder="Search" className="mr-sm-2" />
<ReactBootstrap.Button variant="outline-light">Search</ReactBootstrap.Button>
</ReactBootstrap.Form>
</ReactBootstrap.Navbar>
</div>
)
}
export default Menu;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Current Output:
Current output
Output I want:
Output I want
Make sure you add the CDN link in index.html.
Although you found it this would help others.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"/>
or add this in app.css
#import "bootstrap/dist/css/bootstrap.css";
You have some .css files that are imported in App.js and index.js. Maybe they are overriding some bootstrap rules.
I took your code here https://codesandbox.io/s/test-react-bootstrap-75rsd, removed the App.css and index.css imports and it looks just as you want.
Related
I am using VSCode to create a react app, I have multiple folders as shown in the first image:
This is my App.jsx
import React from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Note from "./components/Note";
function App() {
return (
<div>
<Header />
<Footer />
<Note />
</div>
);
}
export default App;
This is my Index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(<App />, document.document.getElementById("root"));
reportWebVitals();
This is my Header.jsx
import React from "react";
function Header() {
return (
<header>
<h1>Keeper</h1>
</header>
);
}
export default Header;
This is my Footer.jsx
import React from "react";
function Footer() {
const date = new Date();
const curretYear = date.getFullYear();
return (
<footer>
<p>copyright ⓒ {curretYear}</p>;
</footer>
);
}
export default Footer;
I am trying to learn react on VSCode, the same code works on Codesandbox, but I can't get it to work on my VSCode, and I am not getting any errors in the terminal. I am learning React and I would like the help.
Your import paths in App.jsx appear to be wrong try ./Header etc. Remember that import paths are relative and since the imported modules are on the same level as App.jsx, you don't need to go through the components folder
Im working on an NFT minting frontend with react, but it's giving me issues (as always). For some reason, it only displays a blank white page, which I'm struggling to understand. This is my main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
and this is my App.jsx [it's A LOT more than just this, I'm just trying to get it to display any damn text :( ]
import { useState } from 'react'
import logo from './logo.svg'
import './App.css'
import Install from './components/Install'
function App() {
const [count, setCount] = useState(0)
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Hello Vite + React!</p>
</header>
</div>
)
}
export default App
Any feedback would be appreciated
Maybe try to remove unused packages and components. For this case Install component.
I am trying to create a Navbar on a clean React app (with React-Router-Dom) and for some reason I am just getting a blank screen, as far as I can see and from looking up various guides, it should be fine:
App.js:
import React from "react";
import Navbar from "./components/Navbar";
function App() {
return (
<Navbar/>
);
}
export default App;
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Navbar.js
import React from "react";
import { Link } from "react-router-dom";
const Navbar = ()=>{
return(
<nav className = "nav-wrapper">
<div className="container">
<Link to="/" className="brand-logo">Potter Books</Link>
<ul className="right">
<li><Link to="/">Shop</Link></li>
<li><Link to="/">Cart</Link></li>
</ul>
</div>
</nav>
);
}
export default Navbar;
There are multiple ways to fix that.
What I mostly like to use BrowserRouter into the App.js
modify your app.js file by importing BrowserRouter
import {
BrowserRouter,
} from "react-router-dom";
And then add this in the App function.
function App() {
return (
<BrowserRouter>
<Navbar/>
<BrowserRouter/>
);
}
export default App;
For more information, you can consult this page as well.
So to fix this you need to add
import {BrowserRouter as Router} from "react-router-dom";
into Index.js
I am building a new ReactJS app and tried to use react-bootstrap for the UI. I essentially installed yarn add react-bootstrap bootstrap yarn add jquery popper.js" to have everything installed. My index.js` looks as follows:
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.css';
import $ from 'jquery';
import Popper from 'popper.js';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';
import * as serviceWorker from './serviceWorker';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
App.js is quite straightforward:
import React from 'react';
import AppHeader from "./layout/AppHeader";
import RouterOutlet from "../router/Router";
import AppFooter from "./layout/AppFooter";
function App() {
return (
<div>
<div className="wrap">
<AppHeader />
<div className="container">
<RouterOutlet />
</div>
</div>
<AppFooter />
</div>
);
}
export default App;
The interesting part now is the header not working as expected, its containing the NavBar
import React from 'react';
import NavDropdown from 'react-bootstrap/NavDropdown'
import Navbar from "react-bootstrap/Navbar";
class AppHeader extends React.Component {
render () {
return (
<Navbar variant="dark" sticky="top">
<Navbar.Brand>
<img
src="/logo192.png"
width="30"
height="30"
className="d-inline-block align-top"
alt=" "/>
</Navbar.Brand>
<NavDropdown bg="black" title="Menu" id="collasible-nav-dropdown" style={{color: "#5299d3"}}>
<NavDropdown.Item href="/">Home</NavDropdown.Item>
<NavDropdown.Item href="/time">Time</NavDropdown.Item>
<NavDropdown.Item href="/login">Login</NavDropdown.Item>
<NavDropdown.Item href="/logout">Logout</NavDropdown.Item>
</NavDropdown>
</Navbar>
);
}
}
export default AppHeader
This is the Footer
import * as React from 'react';
class AppFooter extends React.Component {
render() {
return (
<footer className="footer">
<div className="container">
<p className="pull-left">© My Company</p>
<p className="pull-right">asd</p>
</div>
</footer>
);
}
}
export default AppFooter;
However the bootstrap styles are not applied, the bar is white without any background at all. Also other things such as "pull-right" classes in the footer don't work. I can see in the browser though that the CSS is loaded as a inline CSS file.
Question: why are the styles not applied to my components so far?
To add background to Navbar, add 'bg="primary" ' to your code in AppHeader like this-
<Navbar bg="primary" variant="dark" sticky="top">
This will make you background blue.
I'm new to Material UI and ReactJS. I've been playing around with Create-React-App (CRA) and reactstrap.
My question is, can I use Material UI and CRA together to build an app?
First install material-ui
npm install --save material-ui
or
yarn add material-ui
src/App.js
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<RaisedButton label="Material UI" />
</div>
</MuiThemeProvider>
);
}
}
export default App;
In summary, these are the things to be done:
Install necessary packages.
import MuiThemeProvider component in App.js, Enclose the app div in MuiThemeProvider component
Now you can import and use any component in material-ui like I used RaisedButton here
Versions of material-ui before 0.19.1 required react-tap-event-plugin
For those versions, you had to do make this change in index.js
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin'; // add
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
injectTapEventPlugin(); // add
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
import injectTapEventPlugin from react-tap-event-plugin in index.js and initialise it. injectTapEventPlugin is used inorder
to remove tap delay in iOS.