I have no experience with react, and I'm trying to teach myself by doing/building. I would like to add a sidebar to a page on my site. However, all my research has lead to articles and tutorials that adds the sidebar to the homepage. I don't want it on the homepage, just one page. The look and feel i'm going for is Strip API documentation page:
If i could just get the sidebar on the page, then I can try to style it up the way I like. Below are my files.
component Sidebar.js
import React, { Component } from "react";
import '../Styles/sidebar.css'
class Sidebar extends Component {
render() {
return(
<div className="sidebar">
<h1> I'm the sidebar</h1>
</div>
);
}
}
export default Sidebar;
The page I want to put the sidebar on "Developer.js":
import React from 'react';
import Sidebar from './components/Sidebar'
import './Styles/sidebar.css'
export const Developers = () => (
<div>
<Sidebar />
<h1> Documentation </h1>
<div>
export default Developers;
My take at sidebar.css:
.sidebar-container{
min-height: 100vh;
background-color: lightgray;
}
.sidebar {
width: 200px;
padding-top: 25px;
}
.sidebar-link{
padding: 10px;
}
.sidebar-link:hover{
border-right: 5px solid dimgray;
background-color: gainsboro;
}
app.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home } from './Home';
import { Developers } from './Developers';
import { NoMatch } from './NoMatch';
class App extends Component {
render() {
return (
<React.Fragment>
<NavigationBar />
<Layout>
<Router>
<Switch>
<Route exact path = "/" component={Home} />
<Route path="/developers" component = {Developers} />
<Route component={NoMatch} />
</Switch>
</Router>
</Layout>
</React.Fragment>
);
}
}
export default App;
With the added css file, I'm the sidebar just shows up right above Documentation
It's not in the "sidebar", what am i missing?
Yes, to start with your components are configured incorrectly. It's very easy to fix it. Let's start with the sidebar.js.
//sidebar.js
import React, { Component } from "react";
import './style.css'
export default class Sidebar extends Component {
render() {
return (
<div className="sidebar-container">
<div className="sidebar">
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
<a className="sidebar-link">Link</a>
</div>
</div>
);
}
}
//Developer.js
import React, { Component } from "react";
import Sidebar from "./Sidebar";
class Developer extends Component {
render() {
return (
<div style={{ display: "flex" }}>
<Sidebar />
<h1>Developer Page</h1>
</div>
);
}
}
export default Developer;
And also, in your App.js file, you are importing as named components. That is the reason why you are not getting the desired output. If you're importing named components you will have to export them the same way too. Currently, you are exporting as them as default, so you don't need the curly braces while importing them.
//App.js
import Home from './Home';
import Developers from './Developer';
import NoMatch from './NoMatch';
Update: Import this file inside your sidebar.js like import ./style.css. I have updated the code for sidebar.js file. Please do check.
//style.css
.sidebar-container{
min-height: 100vh;
background-color: lightgray;
}
.sidebar {
width: 200px;
padding-top: 25px;
display: flex;
flex-direction: column;
}
.sidebar-link{
padding: 10px;
}
.sidebar-link:hover{
border-right: 5px solid dimgray;
background-color: gainsboro;
}
First of all, your Sidebar component can be simplified to a functional component:
// Sidebar.js
import React from "react";
export const Sidebar = () => <div className="sidebar">I'm the sidebar!</div>;
Secondly, in you Developers page, you can remove the Sidebar component because you already have it and you are importing it correctly. Next, add it to your Developers component:
// Developers.js
import React from "react";
import { Sidebar } from "./components/Sidebar";
export const Developers = () => (
<div>
<Sidebar />
<h1> Documentation </h1>
<div>
);
This assumes you have the following folder structure to ensure your imports work correctly:
src/
app.js
Developers.js
components/
Sidebar.js
Related
I'm still a beginner with the ui-material. And I would like to custom my own Button Component with styled-component.
The problem is to override the css according to the button variations, for example if it is primary or secondary:
Here's my code into codesandbox.io
import React from "react";
import PropTypes from "prop-types";
import { CButton } from "./styles";
const CustomButton = ({ children, color }) => {
return (
<div>
<CButton variant="contained" color={color}>
{children}
</CButton>
</div>
);
};
CustomButton.propTypes = {
children: PropTypes.node,
color: PropTypes.oneOf(["primary", "secondary"])
};
export default CustomButton;
import styled, { css } from "styled-components";
import Button from "#material-ui/core/Button";
export const CButton = styled(Button)`
height: 80px;
${({ color }) =>
color === "primary"
? css`
background-color: green;
`
: color === "secondary" &&
css`
background-color: yellow;
`}
`;
import React from "react";
import CustomButton from "./CustomButton";
const App = () => {
return (
<div>
<div
style={{
marginBottom: "10px"
}}
>
<CustomButton color="primary">Primary</CustomButton>
</div>
<div>
<CustomButton color="secondary">Secondary</CustomButton>
</div>
</div>
);
};
export default App;
Could you tell me how I can get my styling to override the ui-material?
Thank you in advance.
It looks like there's a nice example on how to do this in the material-ui docs: https://material-ui.com/guides/interoperability/#styled-components
One thing you seem to be missing is the StylesProvider, which allows your styles to override the default material styles. This seems to work... I don't deal with the conditional in your example, but I don't think that's part of your problem here.
const MyStyledButton = styled(Button)`
background-color: red;
color: white;
`;
export default function App() {
return (
<StylesProvider injectFirst>
<div className="App">
<MyStyledButton color="primary">Foo</MyStyledButton>
</div>
</StylesProvider>
);
}
Here's a codesandbox: https://codesandbox.io/s/infallible-khorana-gnejy
I have a navigation bar on the home page with background-color: white; On moving to another page. I want it to turn black.
My Navigation Styles file:
import styled from 'styled-components'
export const Nav = styled.nav`
background-color: #fff;
`
My Navigation file where I am importing the styles:
import { Link } from 'react-router-dom'
import Nav from './NavStyles'
const NavBar = () => {
return(
<Nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/shop">Shop</Link>
</li>
<li>
<Link to="/cart">Cart</Link>
</li>
</ul>
</Nav>
)
}
export default NavBar
My ShopStyles file (where changing the background-color):
import styled from 'styled-components'
import { Nav } from '../Nav/NavStyles'
const ShopNav = styled(Nav)`
background-color: #323232;
`;
export default ShopNav
My Shop file:
import ShopNav from './ShopStyles'
import { Nav } from '../Nav/NavStyles'
const Shop = () => {
return(
<div>
<Nav>
<ShopNav></ShopNav>
</Nav>
<h1>Over here my shop design will come</h1>
</div>
)
}
export default Shop
App.js:
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Home from './components/Home/Home'
import NavBar from './components/Nav/Nav'
import Shop from './components/Shop/Shop'
const App = () => {
return (
<Router>
<NavBar />
<Switch>
<Route exact path="/"> <Home /> </Route>
<Route exact path='/shop'> <Shop /> </Route>
</Switch>
</Router>
);
}
export default App;
How do I get the color black with my navigation bar?
I don't understand about your worry.
The code which you've written is correct and I have also tested your code.
I recommend that you will check your code again.
I'm working on a react site which uses node-sass and am trying to modify the text that's within the Navbar. What's the correct way of modifying default bootstrap variables? I've tried this so far to modify the text that's in a navigation bar but can't seem to get it to work as intended:
NavigationBar.jsx
import { Navbar, Nav } from 'react-bootstrap';
import React from 'react';
export function NavigationBar() {
return (
<div>
<Navbar bg="light" expand="md">
<Navbar.Brand href="#home">Name Here</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto font-weight-bold">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
App.js
import './App.scss';
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavigationBar } from './components/NavigationBar';
function App() {
return (
<div className="App">
<NavigationBar />
</div>
);
}
export default App;
and App.scss:
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.Navbar {
font-size: 75px;
}
Make sure you have webpack and scss loader working properly. You might need to import the scss/bootstrap.scss instead of css
import './App.scss'; // set scss variables here if you want.
import 'bootstrap/scss/bootstrap.scss';
primeira parte e a classe app
a outra parte é onde eu crio meu carousel, mas ele fica dando erro quando eu inicio o servidor
Target container is not a DOM element.
first part and the app class
The other part is where I create my carousel, but it keeps giving me an error when I start the server
Target container is not a DOM element.
import React, { Component } from "react";
import "./styles.css";
//import Header from "./components/Header/index";
//import CriaCarousel from "./components/Carrousel/CriaCarousel";
// import { Carousel } from "antd";
// import { CarouselStyle } from "./components/Carrousel/styles";
import CriaCarousel from "./components/Carrousel/CriaCarousel";
class App extends Component {
render() {
return (
<div className="App">
<CriaCarousel />
</div>
);
}
}
export default App;
import React, { Component } from "react";
//import ReactDOM from "react-dom";
//import { Settings } from "react-slick";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Carousel } from "antd";
//import "./styles.js";
import { CarouselStyle } from "./styles";
class CriaCarousel extends Component {
render() {
return ReactDOM.render(
<Carousel autoplay="true">
<CarouselStyle>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</CarouselStyle>
</Carousel>
);
}
}
export default CriaCarousel;
This is because of this,
return ReactDOM.render( ... )
You cannot return this from your component. Instead you need to to render the top most component (App.js) to the dom. Read more about ReactDOM here
import ReactDOM from "react-dom"; //Import here
class App extends Component {
render() {
return (
<div className="App">
<CriaCarousel />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root')) //This will render on actual DOM
And your child component should be,
class CriaCarousel extends Component {
render() {
return (
<Carousel autoplay="true">
//<CarouselStyle> //I am not sure what is this doing, but I think you don't need it
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
// </CarouselStyle>
</Carousel>
);
}
}
And the CSS would be this,
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
Demo
Im having trouble with react-router-dom working in production. While my app header and footer are rendered just fine, the router does not work and I can see the following comments where my routes should appear upon inspecting the html in Chrome devtools. I am getting no console errors.
<div>
<!-- react-empty: 15 -->
<!-- react-empty: 16 -->
<!-- react-empty: 17 -->
<!-- react-empty: 18 -->
</div>
This is my App.js component file:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import styled from 'styled-components';
import Header from 'components/Header';
import Footer from 'components/Footer';
import Home from 'containers/Home';
import Select from 'containers/Select';
import Process from 'containers/Process';
import Privacy from 'containers/Privacy';
const AppWrapper = styled.div`
font-family: 'Open Sans', sans-serif;
width: 100%;
max-width: calc(768px + 16px * 2);
margin: 0 auto;
display: flex;
height: 100%;
flex-direction: column;
`;
class App extends Component {
...
render() {
return (
<Router>
<AppWrapper>
<Header/>
<div>
<Route exact path='/' render={({history}) =>
<Home infoHandler={this.handleUserInfo}
imageHandler={this.handleImage}
history={history}/>
}/>
<Route exact path='/select' render={({history}) =>
<Select info={this.state.userInfo}
image={this.state.userImage}
selectionHandler={this.handleSelectedImage}
history={history}/>
}/>
<Route exact path='/process' render={({history}) =>
<Process image={this.state.selectedImage} user={this.state.userInfo}/>
}/>
<Route exact path='privacy' component={Privacy}/>
</div>
<Footer/>
</AppWrapper>
</Router>
)
}
}
export default App;
This is my index.js file:
import React from 'react';
import {render} from 'react-dom';
import App from 'containers/App';
render(<App />, document.getElementById('app'));
The router works like a charm in dev mode. Using Webpack for building.
** Home Component:
import React, {Component} from 'react';
import FacebookLogin from 'components/FacebookLogin';
import {Row, Col} from 'react-flexbox-grid';
import styled from 'styled-components';
import palette from 'palette';
const Img = styled.img`
max-width: 100%;
`;
const H3 = styled.h3`
color: ${palette.black};
`;
class Home extends Component {
render() {
return(
<Row center='xs'>
<Col xs={12}>
<Img src="https://res.cloudinary.com/julsgc/image/upload/v1491106020/Boletia_995x380__2_fqawa8.png"/>
</Col>
<Col xs={12}>
<h3> A que Ser Extraordinario te pareces!? </h3>
</Col>
<Col xs={12}>
<p> Averigualo ahora! </p>
</Col>
<Col>
<FacebookLogin
infoCallback={this.props.infoHandler}
imageCallback={(data) => {
this.props.imageHandler(data);
this.props.history.push('/select');
}}/>
</Col>
</Row>
);
}
}
Home.propTypes = {
history: React.PropTypes.object
}
export default Home;
* Update *
App is now working after switching to hash router. Any further comments appreciated since BrowserRouter is the recommended approach according to the docs.
use below code in httacces file
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
if your app not in root folder then use
<BrowserRouter basename="/the-app">
**also more review check link
https://www.andreasreiterer.at/fix-browserrouter-on-apache/
Please take a look on this Thread
If u are using Webpack, then just add -
devServer{
historyApiFallback: true
}
And for gulp use the following:
historyApiFallback = require('connect-history-api-fallback')
//start a local dev server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true,
middleware: [ historyApiFallback() ]
});
});