So I just dived into the react-bootstrap library today to implement a navbar.
The page with code and demo I looked into: https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly
Notice how the examples are already nicely styled. I tried doing pretty much the same, but it looks depressing and unstyled at all, not even the bg is working.
My code:
import React from "react";
import {Nav, Navbar} from 'react-bootstrap'
import './style.css';
import logo from '../../assets/logo.png';
function LoginNav() {
return (
<Navbar expand="lg" bg="dark" variant="dark">
<Navbar.Brand>
<img id="logo"
className="d-inline-block align-top"
src={logo} alt="logo"
/>
</Navbar.Brand>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Login</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default LoginNav;
My CSS doesn't do anything other than resizing the logo, and I did yarn add react-bootstrap as well as npm i --save react-bootstrap already. I have no idea why it is not working. Any insight can help! Thanks
Without errors for us to look at, there is not much to go off of. I would start with checking where you are importing the LoginNav to. if the <Navbar></Navbar> is a container level element and you are inserting it into a row or col level it may be causing formatting issues.
Update 5-15-2020
You stated the above code is all you have and if so you need to add your Navbar to existing HTML or create a new React App. Either way the info is here https://reactjs.org/.
I was able to run your code just fine and it worked. I changed the bg from dark to light just to see if it changed, and it did.
The commands below will create a React App, and will start the node server environment. Run the commands in console, in a directory you want the app saved. The 'my-app' at the end of the first command is going to be the name of your App. So it can be whatever you want, and 'npx' isn't a typo.
npx create-react-app my-app
cd my-app
npm start
The code below is how I used the Navbar and it displayed just fine. If you already have all this set up, try and put the style sheet import right before the ReactDOM.render() in index.js
Update
Is this how your file set-up looks?
//index.html
< !DOCTYPE html >
<html lang="en">
<head>
// loads of stuff here, taken out for shorthand. Not important for the example
// but important for the overall project to work and is included when you create
// the app. Plus any additional things you add
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './fileLocation'
//import style sheet here and see if that helps with formatting
ReactDOM.render(<App />, document.getElementById('root'))
//App.js
import React, { Component } from 'react'
import LoginNav from './fileLocation'
class App extends Component {
render(){
return (<LoginNav />);
}
}
export default App
Related
I am learning how to use components using React.
My page works fine, but if I move a component to another JS file and attempt to import it, my page goes completely blank.
Here is the working code where the imports are commented out.
//import Header from "./Header.js"
//import Footer from "./Footer.js"
function Body () {
return (
<div>
<h1>Reasons I am excited to learn react</h1>
<ol>Reasons
<li>Popular</li>
<li>Functional</li>
<li>I can build apps</li>
</ol>
</div>
)
}
function Page() {
return (
<div>
{/* <Header /> */}
<Body />
{/* <Footer /> */}
</div>
)
}
ReactDOM.render(<Page />, document.getElementById("root"))
and here is the Header I am trying to import
export default function Header () {
return (
<header>
<nav className="nav">
<img className="nav-image" src = "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" />
<ul className="nav-items">
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
)
}
There is no error message when the lines are uncommented, but when I open the HTML document the page, which displayed before, is always blank.
Why is it that when I uncomment either of the import lines from the top, my page renders completely blank?
Update: It looks like it is a general problem with import; if I add:
import React from 'react';
to the top, it also makes the page render as a blank white screen.
Per recommendation in the comments, I put it in an online editor (Code Sand Box), and the code works fine there. I guess the problem is with how I have Visual Studio Code set up?? I was using live server and then tried to use npm, but didn't quite figure out how to get npm to render the page.
Try using this import:
import Header from "./Header"
Maybe show your folder structure, if it is not working.
ReactDOM.render(<Page />, document.getElementById("root"))
Change above line as below
import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.querySelector("#root")).render(
<React.StrictMode>
<Page />
</React.StrictMode>
);
I'm trying to use Material UI to use buttons in my web app using ReactJS for the frontend. I installed Material UI with the terminal command
npm install #material-ui/core
And my code looks like this:
import React from 'react';
import './Header.css';
import { Button } from '#material-ui/core';
function Header() {
return (
<div className="header">
<div className="headerRight">
<h1>Hi There</h1>
<img
className="headerIcon"
src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg"
alt=""
/>
<div className="button">
<Button>Click Me</Button>
</div>
</div>
</div>
);
}
export default Header;
and the compiler says "Compiled Successfully!" when I hit save, but when I look at the app in my browser, nothing is there at all. When I take out the button, everything else shows up, but when I put the button back in, nothing shows up, and I get a blank screen. I'm really frustrated trying to figure out why the Material UI button does not work. Please help me.
My App.js code looks like this
import './App.css';
import React from 'react';
import Header from './Header';
import Banner from './Banner';
function App() {
return (
<div className="App">
<Header/>
<Banner/>
</div>
);
}
export default App;
Issue for me was that I had installed MUI before jumping into my react ap (cd my-app), so the MUI package was in a parent "Node Modules" directory of my react app.
Deleted the parent Node Modules directory and reinstalled MUI in my react app.
Hopefully this is a simple question and answer, and forgive me if I am missing something easy here, as I am still a bit new to coding...
I am working on a new React App and noticed that when I deploy (for testing UI on various devices), my site is rendering fine, yet images and /or video that I add in do not show up. Please note, I have done other React apps where this works perfectly fine, which is where my confusion lies. For example, the following snippet works fine when I deploy:
import React from "react";
import "./NavbarLandingPage.css";
import logo from "./Inventory-Deals-LOGO-2021-White.png";
class NavbarLandingPage extends React.Component {
render () {
return (
<div>
<nav className="navbar navbar-expand-lg navhelp">
<a className="navbar-brand navlogo image" href="/">
<img
alt=""
className="responsive"
src={logo}
></img>
</a>
</nav>
</div>
)
}
}
export default NavbarLandingPage;
However, when I attempt to deploy it using "require()", it only shows a broken picture link, or nothing at all. For example, here is the exact same snippet using the require() method, yet does not work:
import React from "react";
import "./NavbarLandingPage.css";
class NavbarLandingPage extends React.Component {
render () {
return (
<div>
<nav className="navbar navbar-expand-lg navhelp">
<a className="navbar-brand navlogo image" href="/">
<img
alt=""
className="responsive"
src={require("./Inventory-Deals-LOGO-2021-White.png")}
></img>
</a>
</nav>
</div>
)
}
}
export default NavbarLandingPage;
One last thing to add - I ran an npm audit fix on vulnerabilities just before I began to take my HTML wireframes and convert them into React Components. One of the issues it wanted to fix caused "breaking changes", which I am sure wasn't a good thing...
Hope this provides enough information to let me know what I am doing wrong here. I would rather bring the images in using require(), as I would assume that would be the best way if rendering images dynamically through API calls, etc...
Thank you in advance for any and all help!
Could you try to use this instead
require("./Inventory-Deals-LOGO-2021-White.png").default
That fixed the issue for me.
This question already has an answer here:
Cannot apply any Bootstrap style in using React-bootstrap library
(1 answer)
Closed 5 years ago.
I'm trying to make a navbar using react-bootstrap, but when I render it I get this:
I'm not getting any error messages, and I can't find any documentation explaining what I've got, but clearly I'm doing something wrong. Any ideas?
This is the code I'm using:
import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap/lib/';
const Toolbar = () => {
return (
<Navbar staticTop collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
Brandname Goes Here
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1}>Contact Us</NavItem>
<NavItem eventKey={2}>About Us</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default Toolbar;
go to react-bootsrap getting started tab
and copy the link under the <!-- Latest compiled and minified CSS --> description into your index.html <head> tag, and if you installed react-bootstrap using npm, then you can import the navbar like so:
import { Navbar, Nav, NavItem } from 'react-bootstrap';
It is clear that you haven't imported bootstrap.min.css. Import it in your index.html as follows.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
I cannot recommend to use something like import 'react-bootstrap/*/*.css' because I am not sure which framework and which loaders(eg: webpack) you are using.
I carefully searched the same problem that I faced but didn't find anything helpful.
webpack 1.13.1. Mac OS X El Capitan last version.
What I am trying to accomplish
I want to create a webpack build to develop multiple page apps.
I want to see the structure like this:
source
/source/page1/page1.css
/source/page1/page1.js
/source/page1/page1.html
public
/public/page1/page1.css
/public/page1/page1.js
/public/page1/page1.html
Current build
This is what I've done.
https://gist.github.com/lavezzi1/9cc0e58cd7d2b8f2470e703022a41db7
I tested it with vue.js and it works perfect. But now I want to get it works with react.js as well.
In dev move everything works just fine but when I ran task for prod build I got this error:
ERROR in ./source/pages/index.js
Module not found: Error: a dependency to an entry point is not allowed
What I did. This is my page folder:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<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>
</div>
);
}
}
export default App;
So what am I doing wrong? I am newbie in react.js, maybe I don't understand something.
In vue.js I just create files:
index.html
index.css
index.vue
index.js
And everything works as expected.
I really really hope you guys help me.
why don't you just indicate the js file as entry point and import the css in that entry file. For multiple js entry file you can use the code splitting feature of webpack.
https://webpack.github.io/docs/code-splitting.html
and in your webpack.config.js file you can define entry file like the following.
entry: {
lite: "./lite.js", pro: "./pro.js",
},
output: { filename: "dist/[name].js" },