I have a react navbar on my site and I would like to redirect my page to an .html page, but it's not working properly.
this is the component I am using, with the href reference to the QR CODE page, at the same level that the component page is using.
project link: https://github.com/rudsonramon/customerservice.git
import React from 'react';
import { FaHome } from 'react-icons/fa';
import FormControl from 'react-bootstrap/FormControl';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';;
function HeaderContainer() {
return (
<div>
<Container>
<Navbar fixed="top" bg="primary" variant="dark">
<Navbar.Brand href="#home">ConcertTI</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#home"> <FaHome /> </Nav.Link>
<Nav.Link href="QrCode.html" target='_self'>QR Code</Nav.Link>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-light">Procurar</Button>
</Form>
</Navbar>
</Container>
</div>
)
}
export default HeaderContainer;
./Qrcode.html directs it to a sub folder named Qrcode.html.
remove the ./ and try again.
Related
import React from 'react';
import Navigation from "../components/Nagivation";
const Home = () => {
return (
<div className="home">
<Navigation/>
<div className="homeContent">
<div className="content">
<div className="pdf">
CV Download
</div>
</div>
</div>
</div>
);
};
export default Home;
The file is into app/public/media/AA.pdf
locally it works very fine, App.pdf is open. But on the AWS server, it doesn't. It opens www.aaaa.com/media/AA.pdf but error the page doesn't exist.
Added download attribute
CV Download
This is my Header component
import React from "react";
function Header() {
return (
<div classname = "header">
<nav classname = "navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div classname = "container">
<button classname = "navbar-toggler" data-toggle="collapse" data-target = "#Navbar">
<span classname = "navbar-toggler-icon"></span>
</button>
<h3>Portfolio</h3>
<div classname="btn-group">
<button type="button" classname="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My networking
</button>
<div classname="dropdown-menu">
<a classname="dropdown-item" href="https://docs.google.com/document/d/1iJ1v7HyfodCWvg5OSQIXbUATrBM9mPwdqeIzKuld1qs/edit">Resume</a>
<a classname="dropdown-item" href="https://www.linkedin.com/in/tyler-goodman-39b289195/">LinkedIn</a>
<a classname="dropdown-item" href="https://github.com/KawaiiSlave">Github</a>
</div>
</div>
<div classname = "collapse navbar-collapse" id = "Navbar">
<ul classname = "navbar-nav ml-auto">
<li classname = "nav-item">About Me</li>
<li classname = "nav-item">Skills</li>
<li classname = "nav-item">My Projects</li>
<li classname = "nav-item">My Contact Info</li>
</ul>
</div>
</div>
</nav>
</div>
);
}
export default Header;
Here is my app.js file
import React from 'react';
import './App.css';
import Header from "./components/Header/header";
import About from './components/About/about';
function App() {
return (
<div className="App">
<Header/>
<About/>
</div>
);
}
export default App;
Ive got my stuff to render, but Im confused on where I should put my css. Does it go into the app.css file provided, or is it better off inside the living component, as that components css? If someone could give an example with their own css that would help tremendously. Im just kinda overwhelmed with react starting out. Thank you!
If you want to create specific CSS for your different components, you could use modules. I tend to make 'CSS modules' when I am creating a component I will use often, for instance a card module.
If you have a Card.js component, for instance, you might create a file called card.module.css.
At the top of Card.js, I would then import this using
import style from './card.module.css';
Within Card.js you can then add a className to an element using a JSX expression which accesses the imported style like so
<div className={style.header}>
Within the card.module.css file, you can then write css for .header
.header {
// your CSS here
}
To re-iterate, your Card.js file will access .header through the imported 'style'. If you were to add more CSS in your module, such as
.wrapper {
// your CSS here
}
You could then too access that in your Card.js with
className={style.wrapper}
My Navigation code as:-
const Navigation = (props) => {
console.log(props);
return (
<Navbar bg="primary" variant="dark">
<Navbar.Brand href="/">Dating Service</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/CreateProfile">Create Profile</Nav.Link>
<Nav.Link href="/ViewProfile">View Profile</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default withRouter(Navigation);
It looks like this:-
The whole page is aligned center. How can make it left aligned?
I could fix it by this:-
npm install bootstrap
Later add import 'bootstrap/dist/css/bootstrap.min.css';
Also, it is possible that we can include bootstrap.min.css cdn directly at public/index.html without installing bootstrap.
I wanted to beautify my frontend with ng-bootstrap (installed via npm install --save ng-bootstrap)
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
#NgModule({
...
imports: [NgbModule.forRoot(), ...],
...
})
export class YourAppModule {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
Choose your playlist
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button
class="dropdown-item"
*ngFor="let playlist of playlists"
[class.selected]="playlist === selectedPlaylist"
(click)="onSelect(playlist)">{{playlist.name}}</button>
</div>
</div>
but it renders like that :
Any ideas on how to fix that *insert many digusting synonyms* result ? :D
Looks like you forgot to add the bootstrap.css.
Just add the link to that in your index.html:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
Also, you'll import the NgbModule from this path:
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
Not NOT CALL .forRoot on it.
Here's a Working Sample StackBlitz for your ref.
Hi there I want to know why it is throwing a warning on the console
Warning: Unknown prop `iconCLassNameRight` on <div> tag. Remove this prop from the element. For details, see link fb me
in div (created by Paper)
in Paper (created by AppBar)
in AppBar (created by App)
in div (created by App)
in MuiThemeProvider (created by App)
in App
The is the code I am working on it is on meteorjs and material ui
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import AppBar from 'material-ui/AppBar';
import Player from './Player.jsx';
import TeamList from './Team-list.jsx';
import TeamStats from './Team-stats.jsx';
export default class App extends Component {
render(){
return (
<MuiThemeProvider>
<div className="container">
<AppBar
title="Soccer Application" iconCLassNameRight="muidocs-icon-navigation-expand-more" showMenuIconButton={false} />
<div className="row">
<div className="col s12 m7"> <Player /> </div>
<div className="col s12 m5"> <TeamStats /> </div>
<div className="col s12 m5"> <TeamList /> </div>
</div>
</div>
</MuiThemeProvider>
)
}
}
I want to know why this is throwing an error. The line of interest is in the appbar component iconClassNameRight property. Any help would be greatly appreaciated. Thank you.
Props in React are case-sensitive.
Try replacing iconCLassNameRight (uppercase L) to iconClassNameRight (lowercase L)