I'm trying to use the header and sidebar from React Bootstrap and semantic UI react.
But when I add those components to my page they overlap each other.
How can I divide them? The sidebar, header, and main content should be separated.
Is there a way to create layouts in react?
App.js
import { Container, Row, Col } from "react-bootstrap";
import Stack from "react-bootstrap/Stack";
import Cardtest from "./Components/Card";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import SidebarTest from "./Components/Sidebar";
import Header from "./Components/Header";
function App() {
return (
<div>
<div>
<Header />
</div>
<SidebarTest />
<main>
Main content
</main>
</div>
);
}
export default App;
Its hard to tell without the CSS but try changing the nav bar position from
position:absolute;
Related
I am importing a component, but it does not render. The component is capitalized. I think there is something wrong with the import statement because when I remove it and replace with "Navbar", it renders, but if i keep the import then it does not render.
import styles from "./style";
import { Billing, Business, CardDeal, Clients, CTA, Footer, Navbar, Stats, Testimonials, Hero }
from "./components";
const App = () => { return (
<div className="bg-primary w-full overflow-hidden">
<div className={`${styles.paddingX} ${styles.flexCenter}`}>
<div className={`${styles.boxWidth}`}>
<Navbar />
</div>
</div>
</div>
);
};
export default App;
import React from 'react';
const Navbar = () => {
return (
<div>Navbar</div>
);
};
export default Navbar;
import Navbar from "./Navbar";
import Billing from "./Billing";
import CardDeal from "./CardDeal";
import Business from "./Business";
import Clients from "./Clients";
import CTA from "./CTA";
import Stats from "./Stats";
import Footer from "./Footer";
import Testimonials from "./Testimonials";
import Hero from "./Hero";
export {
Navbar,
Billing,
CardDeal,
Business,
Clients,
CTA,
Stats,
Footer,
Testimonials,
Hero,
};
If i exchange the component
for basic text like "Navbar" or "Navbar" it does not render either. These 2 display when I remove the import components statement.
When i control click , it brings me to the correct Navbar component.
I am following a yt tutorial
https://github.com/adrianhajdin/project_hoobank
my repo is here: https://github.com/lukasmckaine22/userbet_landing_page
I made sure the component was capitalized. I confirmed the component actually leads to the correct component by control clicking it. I confirmed the code renders plain text only when the import is removed. I confirmed the import leads to the correct file by control clicking. I tried only importing the Navbar with and without brackets. I changed the import directory to pull the navbar directory.
I was wrapping my head around the layout for React-bootstrap. Tried the basic layout using Container, Row and Col. You can access the sandbox here.
What I understood from the react-bootstrap docs is the columns should have been put horizontally rather being stacked on top of each other. What I am trying to achieve is get those columns stacked horitzontally.
You have to import the bootstrap CSS file, bootstrap/dist/css/bootstrap.min.css. Try the following:
import "./styles.css";
import { Container, Row, Col } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
export default function App() {
return (
<div className="App">
<Container>
<Row>
<Col>Col 1 of 4</Col>
<Col>Col 2 of 4</Col>
<Col>Col 3 of 4</Col>
<Col>Col 4 of 4</Col>
</Row>
</Container>
</div>
);
}
References:
StackOverflow. Container, Row, Col - in React-Bootstrap not working. https://stackoverflow.com/a/60673785/8121551. (Accessed 22 August, 2021).
I'm a beginner who's trying to make a simple website using React JS.
Here's my App.js file and the other component which is not rendering.
All the other components are rendering fine,Except for the one which I've provided code for(homePageProducts.js).
App.js
import './App.css';
import Header from './Components/Header';
import Footer from './Components/Footer';
import CarouselContainer from './Components/Carousel/CarouselContainer';
import homePageProducts from './Components/homePageProducts/homePageProducts';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<Header></Header>
<CarouselContainer></CarouselContainer>
<homePageProducts></homePageProducts>
<Footer></Footer>
</div>
);
}
export default App;
homePageProducts.js
import React from 'react';
function homePageProducts()
{
return(
<div>
<p>Good morning</p>
</div>
);
}
export default homePageProducts;
PS I was just testing around with this component, Hence the simple code.
I've checked twice and I'm sure that I've imported homePageProducts.js correctly
If you meant to render a React component, start its name with an uppercase letter.
import HomePageProducts from './Components/homePageProducts/homePageProducts';
and render it
<HomePageProducts/>
make sure you have imported it correctly import homePageProducts from './Components/homePageProducts/homePageProducts'
I am trying to add a Footer to my App.js. I have already added the Navigation to the App.js file. I am wanting to add the Footer to every page instead of adding it onto the bottom of every page I make.
App.js file
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./App.css";
import DocumentTitle from "react-document-title";
import Home from "./pages/Home";
import NoMatch from "./components/NoMatch";
import Landing from "./components/Landing";
import Navigation from "./components/Navigation";
import Footer from "./components/Footer";
function App() {
return (
<DocumentTitle title="Page Title">
<Router>
<div>
<Navigation />
<Switch>
<Route exact path="/home" component={Home} />
<Route exact path="/" component={Landing} />
<Route component={NoMatch} />
</Switch>
{/* This Footer placement doesn't work */}
<Footer />
</div>
</Router>
</DocumentTitle>
);
}`
Every time I place the <Footer /> somewhere.. the DOM crashes. Here is an example of what I am receiving...
Error
×
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App.
Attached is a Footer.js and Navigation.js file for ease..
Footer.js
import React from "react";
function Footer() {
return (
<div>
<footer>Footer</footer>
</div>
);
}
export default Footer;
Navigation.js
import React from "react";
function Navigation() {
return (
<div>
<h1>Navbar</h1>
</div>
);
}
export default Navigation;
The answer to this tedious question lay within the exportation of the component. The component was not exported correctly. I corrected that by using my way of exporting the footer component folder.
The component index.js was empty, so I just added export { default } from "./Footer";
Thank you all for your answers.
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 />