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';
Related
I am new to react,
I want to connect the button on the main page with a separate react page.
Here I want to connect the contact link href directing to the contact react page.
import React from 'react';
(function Nav (){
return(
<div id="navid">
<nav className="navbar fixed-top navbar-expand-lg">
<a className="navbar-brand" href="home">Manav</a>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="./Contact">Colab</a>
</li>
<li className="nav-item">
<a className="nav-link" href="x">Blogs</a>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Nav;
Since React apps are usually SPA's (Single Page Application) that means that usually there is just one html page and react will handle the content switching on the page. So using <a> tags will not work since it expects a separate HTML page to exist which does not exist.
The correct way is to use a routing library like react-router and use its Link component to handle the routing or switching the pages.
You have to use react-router-dom npm package to perform routing operations in react.
First you have to install npm install react-router react-router-dom
Now import import { Switch, Route, BrowserRouter } from "react-router-dom" in your App.js file.
Now use <BrowserRouter> <Switch> <Route> tags as shown below:
import Blogs from "./Components/Blogs";
import Colab from "./Components/Colab";
import Nav from "./Pages/Nav";
import { Switch, Route, BrowserRouter } from "react-router-dom";
const App = () => {
return (
<div className="App">
<BrowserRouter>
<Nav />
<Switch>
<Route path="/BLog">
<Blog />
</Route>
<Route path="/Colab">
<Colab />
</Route>
</Switch>
</BrowserRouter>
</div>
);
};
export default App;
after setting up Routes of components in App.js go to your Nav.js
import {Link} from "react-router-dom" in Nav.js and set the Links to the path as shown below:
import React from "react";
import { Link } from "react-router-dom";
const Nav = () => {
return (
<div>
<Link to="Blog" style={linkStyle}>
Blog
</Link>
<Link to="Colab" style={linkStyle}>
Colab
</Link>
</div>
);
};
export default Nav;
Yo dont need to use <a className="nav-link" href="x">Blogs</a> instead we use Link and Route. You can get more information from the documentation of react-Route-dom
I am working on a SPA using React.
Currently, in production, user only sees a blank page when the app crashes.
So, I am trying to set a custom error page.
Since I am using BugSnag for error monitoring in my react app; I have used the ErrorBoundary provided by BugSnag.
Following is the code for initializing and placing the ErrorBoundary.
const bugsnagClient = bugsnag('8XXXXXXXXXXXXXXXbac')
bugsnagClient.use(bugsnagReact, React)
const ErrorBoundary = bugsnagClient.getPlugin('react')
ReactDOM.render(
<ErrorBoundary FallbackComponent={FallBack}>
<IntlProvider locale={language} messages={messages[language]}>
<Provider store={store}>
<App />
</Provider>
</IntlProvider>
</ErrorBoundary>,
document.getElementById('root')
);
Following is the custom error code:
import React, { Component } from 'react';
import fallbackVector from '../assets/500-error-vector.svg';
import { Link } from "react-router-dom";
export default class FallBack extends Component{
render(){
return(
<div className="container-fluid mt-3 mb-3 mt-md-5 mb-md-5">
<div className="row">
<div className="col-12 col--404 text-center">
<img src={fallbackVector} alt="page not found" />
<p className="mt-5 font-weight-bold">Something went wrong!</p>
<Link to="/">
<button className="btn btn-primary mt-3">GO TO HOME</button>
</Link>
</div>
</div>
</div>
)
}
}
Somehow, it is still showing the blank page.
There can be a possibility that error is happening outside of the React component tree and therefore it is not being caught by ErrorBoundry.
Any ideas about how to solve this issue?
If the error happens outside of the React component tree then it wouldn't be caught by the ErrorBoundary and the Fallback component won't be rendered.
If you have a reproduction case which triggers an error in the React component tree where this isn't working then please contact us at Bugsnag Support and we'll take a look.
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 />
I am facing a issue with my react bootstrap code. Whenever I use Navbar component of react bootstrap, my computer gets hang and I had to force shutdown computer. I am not sure what exactly wrong with the code snippet below:
import React, { Component } from 'react';
import Nav from 'react-bootstrap/Nav';
import './navbar.css';
class Navbar extends Component {
render() {
return (
<div className="nav-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>
)
}
}
export default Navbar;
Interesting thing is whenever I use plain html to render Navbar computer does not hang but when I had this react bootstrap Navbar, it hangs.
You defined a component called Navbar and you're calling it inside itself. Seems like that would create a vicious loop that will kill your App and by extension your computer performance.
Try renaming the component to something else or take out the Navbar jsx inside your render which doesnt seem necessary:
import React, { Component } from 'react';
import Nav from 'react-bootstrap/Nav';
import './navbar.css';
class Navbar extends Component {
render() {
return (
<div className="nav-container">
<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>
</div>
)
}
}
export default Navbar;
See working sandbox: https://codesandbox.io/s/shy-hooks-e6n81
I´m trying to use the official semantic-ui-react for the first time with React. I´ve built a brand new react application:
$ create-react-app test
And I then tried to add the same react image as follows in App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import { Image } from 'semantic-ui-react';
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 className="ui container">
<h1>Hello World</h1>
<Image src={logo} avatar/>
<Image src={logo} size='mini'/>
</div>
</div>
);
}
}
export default App;
The result shows me 2 big react {logo} images, not mini or avatar styled:
Ideas of what I´m missing here ?
Semantic UI React requires a Semantic UI' CSS, you forgot to setup it, here is instuctions. We will also add an example setup with CRA soon.
You might have found your answer already, but not seeing it here, so adding solution for the same error I got while using Image component with svg icon
import { Image } from 'semantic-ui-react';
import { ReactComponent as Logo } from './logo.svg';
<div className="ui container">
<h1>Hello World</h1>
<Image as={Logo} title="logo" avatar />
</div>
Hope this helps some one!