Develop Reference

Basic classNames not working in new React App

Just created a new react app using 'npx create-react-app my-app' (so the webpack and all modules were configured for me) and none of my classNames are being implemented. In case it was something I was doing wrong, I tried copying and pasting basic ones like the navbar examples from react-bootstrap.
It's displaying the text for the navbar but none of the styling. Anyone run into this or have an idea of what could be the problem?
import React from 'react';
import ReactDOM from 'react-dom';
import { Container, Nav, Navbar } from 'react-bootstrap';
function App() {
return (
<Container>
<Navbar bg="dark" variant="dark">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Navbar>
<>
<div className="d-flex flex-row">
<div className="p-2">Flex item 1</div>
<div className="p-2">Flex item 2</div>
<div className="p-2">Flex item 3</div>
</div>
</>
</Container>
);
}
export default App;

Have you installed react-bootstrap? If not just enter
npm install react-bootstrap
It will then install all the necessary files.

Some stylesheets are required to use these components. So you should define it as below.
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';

"Value is declared but never read" but i am declaring the value

I'm trying to build a portfolio website in React ,i'm very new to React (about 3 days), and i have imported some code for the website nav bar and declared it in the code but it doesn't show up on the website and vscode says that the value was not declared. How do i fix this?
I've tried turning the code into a component and rearranging the code but i still get the same result.
App.js - main code
import React from 'react';
import './App.css';
import navBar from './navBar/navBar';
function App() {
return (
<div className="app">
//navBar that won't show up
<navBar />
<div className="landingPage"></div>
<div className="projectPage"></div>
<div className="aboutPage"></div>
<div className="footer"></div>
</div>
)
}
export default App;
Code for the navBar
import React from "react";
import "./navBar.css";
function navBar() {
return (
<div>
<h1>NAVBAR PLACEHOLDER</h1>
</div>
)
}
export default navBar;

Your question title is little bit wierd. You have fixed the value error in your code. But you still have error with the component:
//navBar that won't show up
<navBar />
In react custom built components name should always start with capital letter. So do this:
import NavBar from './navBar/navBar';
// -- ^^ you can name it anything as it's default import
<NavBar />

Why does the whole DOM re-render when navigating between routes?

I am learning react so forgive me if this has been asked a million times but I have browsed and no solution has fixed my issue. Apart from fixing the issue I would like to understand how the mechanics under the hood work...
I have 2 simple components NavBar and Home. Code below for both.
NavBar:
import React from "react";
class NavBar extends React.Component {
render () {
return (
<nav className="navbar sticky-top navbar-light" style={NavBarStyle}>
<a className="navbar-brand" href="/">
<img src={require('./av_tiny.png')} style={ImageStyle} alt="Logo"></img>
</a>
</nav>
)
}
}
const NavBarStyle = {
// some styling
}
const ImageStyle = {
width: '100px',
height: '50px',
marginLeft: '20px'
}
export default NavBar;
Home:
import React from "react";
class Home extends React.Component {
render(){
return(
<h1>Home</h1>
);
}
}
export default Home;
When I navigate between routes, the whole DOM re-renders. I don't want the NavBar to re-render. My routes are declared in App.js as per below, and I have tried moving <NavBar /> outside the <Router> tags and the other way around. I have also tried putting <NavBar /> in its own <div> tags. Still the app behaves the same, whenever I change the URL it re-renders everything. How can this be avoided and what should I read up to properly understand the mechanics?
import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
//individual components
import Home from "./Home";
import SignInPage from "./Components/Login";
import NavBar from "./Components/Layout/NavBar"
//Routing to components
class App extends React.Component {
render() {
return(
<div>
<NavBar/>
<Router>
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={SignInPage}/>
</Router>
</div>
)
}
}
export default App;
EDIT:
I think I should've mentioned that re-renders happen when I navigate by manually changing the URL in the browser. I have some code on my /login route that does this.props.history.push('/'); after successful login and the DOM does not re-render. Just {SignInPage} gets unmounted and {Home} gets mounted. I would expect the same behavior when navigating between the pages manually or am I missing something?

You're using <a> elements to create your links. These cause the browser to navigate to the new URL without triggering the JavaScript that would cause the content to be dynamically updated using React.
Use the <Link> component from whatever React Router library you are using instead.
Further reading:
Anchor tags vs Link components in React

The reason why it re-renders hole dom is that the router is changing root properties.
Take a look at nested routers, it will give you an idea of how to achieve your goal Nested routes with react router v4 / v5

React-Bootstrap - How to keep Navbar.Toggle button visible at all times?

I'm using React-Bootstrap to make a navigation menu. The toggle button once expanded contains my nav items to go to different parts of my app. So far I know it is supposed to be responsive to small-screened devices as the nav items disappear inside the toggle button as soon as the display width is smaller than 768px and appear inside the navbar if the screen is any wider.
What I want is to keep the toggle button, its behavior and its nav items (from the Navbar.Collapse) inside at all times. I've searched the documentation and other questions but haven't found any way to do this.
Here is my code :
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
import { actionCreators } from '../store/ExpeditionStore';
import './NavMenu.css';
const translations = require('../Translations');
class NavMenu extends React.Component {
render() {
return (
<Navbar inverse fixedTop fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Toggle />
<Navbar.Brand>
{this.props.title}
</Navbar.Brand>
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem>
<Glyphicon glyph='plane' />{translations.getCaption('shipment')}
</NavItem>
</Nav>
<Nav>
<NavItem onClick={() => this.props.switchLanguage(translations)}>
EN/FR
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default connect(
state => state.expeditionStore,
dispatch => bindActionCreators(actionCreators, dispatch)
)(NavMenu);
How to keep my toggle button and the Navbar.Collapse nav items inside it even if the device is wider than 768px?

Add expand attribute with value of "xl" or "xxl" to main Navbar tag. eg: expand="xxl"

Instead of using React-bootstrap approach, I suggest using normal bootstrap to achieve this result.
Put Bootstrap CDN link in your index.html file. Then this normal JSX code works for me:
<nav className="navbar narbar-expand-xl"> </nav>
Because the Bootstrap class narbar-expand-xl indicates that when screen equal or lower than the desktop size, the navbar will will collapse.

React-Bootstrap navbar won't render; type should not be null, undefined, boolean or number

This is a bit absurd. I've been testing components straight from the React-Bootstrap site and some fail while others succeed. Here's my code:
import * as React from "react";
import * as ReactDOM from "react-dom";
var Jumbotron = require('react-bootstrap/lib/Jumbotron');
var Button = require('react-bootstrap/lib/Button');
var Nav = require('react-bootstrap/lib/Navbar').Nav;
var NavItem = require('react-bootstrap/lib/Navbar').NavItem;
var NavDropdown = require('react-bootstrap/lib/Navbar').NavDropdown;
var Navbar = require('react-bootstrap/lib/Navbar');
var MenuItem = require('react-bootstrap/lib/Button').MenuItem;
export class App extends React.Component<any, any> {
constructor() {
super();
}
return (
<div>
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
This is literally copied straight from the Navbar example code with a wrapping div. It gives me 13 copies of React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofApp. error and one of Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method ofApp``.
However, if I try the Jumbotron demo code, it works fine; it renders the Jumbotron without any issues. Am I importing something wrong in the import statements? This is literally the simplest of examples, how can it be going so wrong?

This is due the reason that you Navbar.Header and any other item that you use with Navbar is undefined, however your Navbar is defined. This may be due to the reason that you babel is not properly resolving them
Try using you import differently as
import React from 'react';
import ReactDOM from 'react-dom';
import {Navbar, Nav, NavItem, NavDropdown, Button, Jumbotron, MenuItem} from 'react-bootstrap';
I think this should work for you.

OK, deleting my node-modules folder and reinstalling with npm i fixed that issue. Not sure what was wrong with my initial install, but wiping it seemed to work out, so hey, why not.