We Keep Coding

Why is my react app displaying a blank screen after importing and using an icon from material ui despite compiling successfully in my console?

This is the code and it runs fine up until I added the "Avatar" line. I had to use react icons instead of material UI because it wasn't displaying. I would also appreciate an alternative package I can install that would allow me to use the Avatar component. Thanks in advance.
import React from 'react';
import { MdOutlineMenu } from 'react-icons/md';
import { FiSearch } from 'react-icons/fi';
import { MdVideoCall } from 'react-icons/md';
import { GrApps } from 'react-icons/gr';
import { IoIosNotifications } from 'react-icons/io';
import Avatar from '#material-ui/core/Avatar';
function header() {
return (
<div className='header'>
<h1>I am a header</h1>
<MdOutlineMenu />
<img className='header__logo'
src="https://imgs.search.brave.com/0Adz0eT0KyLAofHJ_wU_1-
GqmHa0rnORMw9GWm__p0Q/rs:fit:844:225:1/g:ce/aHR0cHM6Ly90c2U0
/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5f/SWZFYVVzc2paUXda/MXU5MmIxX0dnSGFF
/SyZwaWQ9QXBp" alt="" />
<input type="text" />
<FiSearch />
<MdVideoCall />
<GrApps />
<IoIosNotifications />
<Avatar alt="Remy Sharp" src="https://avatars2.githubusercontent.com/u/24712956?
s=400&u=b71527e605ae1b748fc2d4157a842e57e427ad44&v=4"/>
</div>
);
}
export default header;

As an alternative to material-ui, you can simply use react-avatar.It can be easily be installed into your app using NPM. Find the instructions in this article here - https://www.npmjs.com/package/react-avatar.
I still can't figure out why material-ui is giving me a blank screen.

Use mui icons between components in react

So I am trying to use mui icons between components.
I am using the <Icon /> component but there are two problems with that:
Only half of the icon is rendered.
I cannot style the icon in the component but instead have to style it where im using the component
src/components/sidebar/Sidebar.comp.js (Where im using the icon component)
import React from "react";
import twitterLogo from "../../images/twitter_logo.png";
import { Home } from "#mui/icons-material";
import { Link } from "react-router-dom";
import SidebarOption from "./SidebarOption.comp";
function Sidebar() {
return (
<div className="px-4 py-2 ">
<div className="rounded-full transition-color cursor-pointer hover:bg-blue-100 px-2 py-3 w-max">
<Link to="/home">
<img src={twitterLogo} alt="twitter_logo" className="h-7" />
</Link>
</div>
<SidebarOption
MuiIcon={<Home style={{ fontSize: "2rem" }} />}
path="/home"
/>
</div>
);
}
export default Sidebar;
./SidebarOption.comp.js (Where im creating the icon prop)
import React from "react";
import { Icon } from "#mui/material";
import { Link } from "react-router-dom";
function SidebarOptions({ MuiIcon, path }) {
return (
<div className="rounded-full transition-color cursor-pointer hover:bg-gray-300 p-[7px] w-max h-max">
<Link to={path}>
<Icon>{MuiIcon}</Icon>
</Link>
</div>
);
}
export default SidebarOptions;
Thanks in advance!

You are using a combination of two APIs here. <Icon /> component is meant to be used for custom font icons, while the <Home /> icon (among others) is already ready-to-use as it is. Remove the wrapping <Icon /> component from SidebarOptions component and it should work.

React inline background image

I am trying to access the dynamically image from the public directory and using inline style to pass in the props in the Card.js and call it in CardComponent.js. I am very new to react. I don't know what I am doing wrong here. Can you help me with this? Thanks!
Here is the card I am trying to render:
Here is the directory of image I am trying to access : public/assets/img/talent.jpg
Card.js Code:
import React from "react";
import "../styles/Card.css";
function Card(props) {
return (
<div>
<div
className="img-item"
style={{
backgroundImage: `url(require("/assets/img/"${props.image}))`,
}}
>
<div className="text-center centered">
<h3 className="reset-mp text-left mb-2">{props.cardTitle}</h3>
<p className="reset-mp">{props.cardDescription}</p>
</div>
</div>
</div>
);
}
export default Card;
CardComponent.js code:
import React from "react";
import Card from "./Card";
import "../styles/CardComponent.css";
function CardComponent() {
return (
<div className="cards">
<Card
cardTitle="A Talent"
cardDescription="Looking for a job"
image="talent.jpg"
/>
</div>
);
}
export default CardComponent;

Everything inside the public folder is a static file, it will be copied exactly as it is during build in root.
Here a better explanation
So, in your case, you should be able to view you image on:
http://127.0.0.1:3000/assets/img/talent.jpg
So, you can just use:
<div style={{ backgroundImage: `url(/assets/img/${props.image})` }}>

try to change this line /assets/img/ to this ./assets/img/

Page not showing in React.js

I am trying to build a landing page based on React.js but after everything I did with react.js bootstrap the page is not showing but only showing as the original default react page;
here's the App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";
ReactDOM.render(<App />, document.getElementById('root'));
const Example = (props) => {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
};
export default Example;[enter image description here][1]
serviceWorker.unregister();
I was wondering is there some file that i missed to import or export since i am new to React.js, please help thanks!

so you are rendering the original App to the page: ReactDOM.render(<App />, document.getElementById('root'));
If you customise the App file rather than in the index, e.g.
function App() { = (props) => {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
};
export default App;
It should then be rendered on the page.

I can see from your code that your App Component will render to the DOM.
Are you also looking for your Example component ??
Then you need to first include your Example Component somewhere into APP Component itself (Import Example in app.js) and then render your App component to DOM in index.js

hey you are rendering the app component
here this line is doing that ReactDOM.render(<App />, document.getElementById('root'));
if you want to render Example component ,you need to put it inside App.js file like below
import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";
function App() {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>``
</Card>
);
}
export default App;
add export default App in bottom answer updated

Desired result can be achieved like this:
App component:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
const App = (props) => {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
};
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";
ReactDOM.render(<App />, document.getElementById('root'));
export default Example;
// [enter image description here][1]
serviceWorker.unregister();

If there is no error on your terminal, check your index.css. Most probably the global styling has blurred out the rendered elements.

Building a small site in React with one module VS in Html/css/js

I'm new to React.. If I load all my content like so in App.js in the React framework (all as one component). I'm guessing I'm not really using React in the proper way. But does this one component for a whole website approach have any advantage/disadvantage over building it in the normal HTML/CSS/JS format? Would this actually be slower as a site ?
import React, { Component } from 'react';
import WebFont from 'webfontloader';
import urban_tribal_stfregular from './fonts/urban_tribal_stfregular.ttf';
import urban_brush_zoneregular from './fonts/urban_brush_zoneregular.ttf';
import urbanpaintsregular from './fonts/urbanpaintsregular.ttf';
import urbantrailsregular from './fonts/urbantrailsregular.ttf';
import urbanposterregular from './fonts/urbanposterregular.ttf';
import urban_rubberregular from './fonts/urban_rubberregular.ttf';
import logo from './img/logo.png';
import leaf from './img/leaf.png';
import hq from './img/hq.png';
import eyeSprinkle from './img/eye-sprinkle.png';
import docturDotHead from './img/doctur-dot-head.png';
import johnnyVenus from './img/johnny-venus.png';
import pyramid from './img/pyramid.png';
import goldElevator from './img/gold-elevator.png';
import demon from './img/demon.png';
import sword from './img/sword.png';
import stage1 from './img/stage-1.png';
import stage1Fire1 from './img/stage-1-fire-1.png';
import stage1Fire2 from './img/stage-1-fire-2.png';
import stage2Fire1 from './img/stage-2-fire-1.png';
import cloud1 from './img/cloud-1.png';
import cloud2 from './img/cloud-2.png';
import stage2 from './img/stage-2.png';
import footerShim from './img/840.png';
import footer from './img/footer.png';
import './App.css';
const styles = {
urban_tribal_stfregular: {
fontFamily: 'urban_tribal_stfregular'
},
urban_brush_zoneregular: {
fontFamily: 'urban_brush_zoneregular'
},
urbanpaintsregular: {
fontFamily: 'urbanpaintsregular'
},
urbantrailsregular: {
fontFamily: 'urbantrailsregular'
},
urbanposterregular: {
fontFamily: 'urbanposterregular'
}
};
// CONFIG OBJECT TO PASS TO HOC
class App extends Component {
render() {
let projectTitle = 'Earthgang'
return (
<div className="App">
<div className="background-enhance">
<header className="App-header">
<div style={{flexDirection:"row"}}>
{/* new wrap for dat perspective ting */}
<div className="wrap">
<div className="bg">
{/* perspective level 1 (back)*/}
<div style={{ position: "absolute", width: "100%" }}>
<div className="plate">
<br />
</div>
<img src={hq} className="hq" alt="HQ" />
<div id="imageEye" className="spriteEye"></div>
<img src={leaf} className="leaf" alt="weed" />
<img src={leaf} className="leaf leaf_right" alt="grass" />
</div>
<div className="bg">
{/* perspective level 2*/}
<div id="imageHeadJohny" className="spriteHeadJohny"></div>
<div id="imageHeadDot" className="spriteHeadDot"></div>
<div className="bg">
{/* perspective level 3*/}
<img alt="" id="myButtn" className="logoTop" src={logo} />
<div className="pyramid-box">
<img src={pyramid} className="pyramid" alt="pyramid" />
<img src={goldElevator} className="gold-elevator" alt="pain profit" />
<img src={eyeSprinkle} className="eye-sprinkle" alt="eye" />
<img src={demon} className="demon" alt="demon" />
<div className="stages stage-1-box">
<img src={stage1}className="stage-1" alt="Stage 1" />
<img src={stage1Fire1} className="stage-1-fire-1" alt="Stage 1 Fire 1" />
<img src={stage1Fire2} className="stage-1-fire-2" alt="Stage 1 Fire 2" />
</div>
<div className="stages stage-2-box">
<img src={stage2} className="stage-2" alt="Stage 2" />
<img src={stage2Fire1} className="stage-2-fire-1" alt="Stage 2 Fire 1" />
</div>
</div>
<div id="imageApe" className="spriteApe"></div>
<div id="imageHyena" className="spriteHyena"></div>
</div>
</div>
</div>
</div>
{/* End of new wrap for dat perspective ting */}
</div>
</header>
<div id="footer1">
</div>
<div id="footer2">
<p>Footer (or other) content here</p>
</div>
<div style={{flexDirection:"row"}}>
<div>
</div>
</div>
</div>
</div>
);
}
}
export default App;

Well , this is entirely just my own opinion which may be wrong .
If you are building with this single component website approach , then there is no need to use react really . You are just loading extra 57 kb or something according to this link React file size since you are not loading extra libraries.
But obviously maintaining this would not be an easy job and you are better off using react features to make you life easier and make the app scalable