I have just started to learn React.js and material-ui. I was using this to display an icon on screen. However the icon is not displayed on the screen and the screen appears to be blank.
Here is my code:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {IconButtonExampleSimple} from './IconButtonExampleSimple.js';
class App extends React.Component{
render()
{
return(
<MuiThemeProvider>
<IconButtonExampleSimple />
</MuiThemeProvider>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
IconButtonExampleSimple.js
import React from 'react';
import IconButton from 'material-ui/IconButton';
export class IconButtonExampleSimple extends React.Component{
render ()
{
return (<div>
<IconButton iconClassName="muidocs-icon-custom-github" />
<IconButton iconClassName="muidocs-icon-custom-github"
disabled={true} />
</div>
);
}
}
Add this line to your index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
You are including the Material-UI part of the icon buttons but those are refering to google's Material-Icons so you must link it in your index file.
Related
Hi guys I am new to React .Just want to render my component into app component but unable to do so here is my code :
conditionalView.js:
import React, { Component } from 'react'
export class conditionalView extends Component {
render() {
return (
<div>
<h2>Conditional View</h2>
</div>
)
}
}
export default conditionalView
App.js
import logo from './logo.svg';
import './App.css';
import Bike from './bike';
import Car from './car';
import FnEvent from './FnEvent';
import ClsEvent from './ClsEvent';
import ClsEventBind from './ClsEventBind';
import conditionalView from './conditionalView';
function App() {
return (
<div className="App">
<header className="App-header">
{/* <img src={logo} className="App-logo" alt="logo" />
<Bike name="Caliber 125" />
<Car name="Maruti 800" /> */}
{/* <FnEvent />
<ClsEvent /> */}
{/* <ClsEventBind /> */}
<conditionalView />
</header>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import reactDom from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Basically i want to render content of conditionView.js component into App.js but it is not picking up the content.
In react custom components are supposted to start with capital letters. For standard HTML elements, like div, span use lower case.
Also, no need to export twice from ConditionalView.
You can export at the same time of declaration along with the default keyword.
import React, { Component } from 'react'
export default class conditionalView extends Component {
render() {
return (
<div>
<h2>Conditional View</h2>
</div>
)
}
}
Your component should be PascalCase: ConditionalView, not conditionalView.
This might be happening because you are exporting component more than once
export class conditionalView extends Component {
remove the export keyword from here
React components should always start with a capital letter, so rename <conditionalView /> to <ConditionalView />,
and update the import statement too;
import ConditionalView from './conditionalView';
I am building a new ReactJS app and tried to use react-bootstrap for the UI. I essentially installed yarn add react-bootstrap bootstrap yarn add jquery popper.js" to have everything installed. My index.js` looks as follows:
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.css';
import $ from 'jquery';
import Popper from 'popper.js';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';
import * as serviceWorker from './serviceWorker';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
App.js is quite straightforward:
import React from 'react';
import AppHeader from "./layout/AppHeader";
import RouterOutlet from "../router/Router";
import AppFooter from "./layout/AppFooter";
function App() {
return (
<div>
<div className="wrap">
<AppHeader />
<div className="container">
<RouterOutlet />
</div>
</div>
<AppFooter />
</div>
);
}
export default App;
The interesting part now is the header not working as expected, its containing the NavBar
import React from 'react';
import NavDropdown from 'react-bootstrap/NavDropdown'
import Navbar from "react-bootstrap/Navbar";
class AppHeader extends React.Component {
render () {
return (
<Navbar variant="dark" sticky="top">
<Navbar.Brand>
<img
src="/logo192.png"
width="30"
height="30"
className="d-inline-block align-top"
alt=" "/>
</Navbar.Brand>
<NavDropdown bg="black" title="Menu" id="collasible-nav-dropdown" style={{color: "#5299d3"}}>
<NavDropdown.Item href="/">Home</NavDropdown.Item>
<NavDropdown.Item href="/time">Time</NavDropdown.Item>
<NavDropdown.Item href="/login">Login</NavDropdown.Item>
<NavDropdown.Item href="/logout">Logout</NavDropdown.Item>
</NavDropdown>
</Navbar>
);
}
}
export default AppHeader
This is the Footer
import * as React from 'react';
class AppFooter extends React.Component {
render() {
return (
<footer className="footer">
<div className="container">
<p className="pull-left">© My Company</p>
<p className="pull-right">asd</p>
</div>
</footer>
);
}
}
export default AppFooter;
However the bootstrap styles are not applied, the bar is white without any background at all. Also other things such as "pull-right" classes in the footer don't work. I can see in the browser though that the CSS is loaded as a inline CSS file.
Question: why are the styles not applied to my components so far?
To add background to Navbar, add 'bg="primary" ' to your code in AppHeader like this-
<Navbar bg="primary" variant="dark" sticky="top">
This will make you background blue.
I am fairly new to React and am having trouble rendering a component in App.js. After much googling I still don't know why I am just getting a blank white page in the browser instead of a printed piece of text as shown in component1.js. Here's my code:
component1.js
import React from 'react';
class component1 extends React.Component {
render() {
return (
<div>
<h1>It's a bit chilly out there</h1>
</div>
);
}
}
export default component1;
App.js
import React, { Component } from 'react';
import {component1} from './component1.js';
class App extends React.component{
render() {
return (
<div>
<component1 />
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Could anyone please steer me towards the right path and tell me what I am doing wrong here?
Thanks in advance.
Wrong case :
class App extends React.Component
------------------------↑
Also, component1 must be imported as a default import (not a named import) with a capital letter :
import Component1 from './component1.js';
I'm just trying to load the react-bootstrap component , and it doesn't seem to be loading. I feel like I'm missing something obvious. I have installed react-bootstrap and bootstrap. I'm trying to wrap the and export it to App.js
Here is my Navbar component and App.js respectively:
import { Navbar } from 'react-bootstrap';
import { Component } from 'react';
class NavigationBar extends Component{
render(){
return(
<Navbar>
hello
</Navbar>
)
}
}
export default NavigationBar;
import React from 'react';
import NavigationBar from './components/NavigationBar.js'
import { Navbar } from 'react-bootstrap'
function App() {
return (
<div className="App">
<header className="App-header">
<NavigationBar></NavigationBar>
</header>
</div>
);
}
export default App;
Change this line => import React, { Component } from 'react';
import React, { Component } from 'react';
import { Navbar } from 'react-bootstrap';
class NavigationBar extends Component{
render(){
return(
<Navbar>
home
</Navbar>
)
}
}
export default NavigationBar;
I keep getting this error message(see 1st image below), when I run my ReactJS app(in the browser, and in the terminal).
Error message in browser:
My problem is that I have exported my App.js file. So I don't understand where the error message is coming from. All of my other files in the app have also been exported correctly.
Code from Code Editor:
Here is my code as text from the App.js file:
import React, { Component } from 'react';
//import 'bootstrap/dist/css/bootstrap.css';
import Navigation from './Components/Navigation';
import SideNavigation from './Components/SideNavigation';
import Backdrop from './Components/Backdrop';
//import DrawerToggleButton from './Components/DrawerToggleButton';
import About from './Components/About';
//import Portfolio from //'./Components/Portfolio';
import Contact from './Components/Contact';
import Footer from './Components/Footer';
import './App.css';
class App extends Component {
render() {
return(
<div>
<Navigation />
<SideNavigation />
<Backdrop />
{/* <DrawerToggleButton /> */}
<About />
{/* <Portfolio /> */}
<Contact />
<Footer />
</div>
)
}
}
export default App;
There are number of reasons you can face this error.
1) If your App Component looks like this export const App = () => ....all your code,
try importing your App component like this import {App} from './App'
2) Try making your App component using a class like export default class App extends React.Component
Hope this helps..