I deployed my Vite React site on Netlify but my skill icons aren't rendered!!
Here's the site..
I did execute npm run build before deploying, I got the dist folder and deployed that on Netlify.
But at first the assets folder didn't had the icons so I added it in the assets (of dist folder) folder too, but no success!!
Please help.
I wanna render my skill icons of my portfolio site.
You need to move your assets directory into the public directory, and you need to remove ./src from the source path of the various img files. Something like:
{
id: 1,
icon: "/assets/html5.svg",
iconName: "HTML",
},
Referring to the Vite documentation You should put Your assets files into public folder directly.
Notice that:
You should always reference public assets using root absolute path -
for example, public/icon.png should be referenced in source code as
/icon.png.
folder&file structure:
Skills.jsx (icons)
import React from "react";
// import Skill from "./Skill";
function Skills() {
return (
<>
<section className="skills">
<div className="card">
<div className="content">
<img className="skillIcon" src="/html5.svg" alt="Icon" />
<p className="skillName">HTML</p>
</div>
<div className="content">
<img className="skillIcon" src="/css3.svg" alt="Icon" />
<p className="skillName">CSS3</p>
</div>
<div className="content">
<img className="skillIcon" src="/js.svg" alt="Icon" />
<p className="skillName">JavaScript</p>
</div>
<div className="content">
<img className="skillIcon" src="/react.svg" alt="Icon" />
<p className="skillName">ReactJs</p>
</div>
<div className="content">
<img className="skillIcon" src="/mongodb.svg" alt="Icon" />
<p className="skillName">MongoDB</p>
</div>
<div className="content">
<img className="skillIcon" src="/express.svg" alt="Icon" />
<p className="skillName">ExpressJs</p>
</div>
<div className="content">
<img className="skillIcon" src="/github.svg" alt="Icon" />
<p className="skillName">GitHub</p>
</div>
<div className="content">
<img className="skillIcon" src="/node.svg" alt="Icon" />
<p className="skillName">NodeJs</p>
</div>
<div className="content">
<img className="skillIcon" src="/password.svg" alt="Icon" />
<p className="skillName">Authentication</p>
</div>
<div className="content">
<img className="skillIcon" src="/api.svg" alt="Icon" />
<p className="skillName">API</p>
</div>
</div>
</section>
</>
);
}
export default Skills;
Intro.jsx (hero.gif)
import React from "react";
import hero from "/hero.gif";
function Intro() {
return (
<>
<main>
<section id="intro" className="hero">
<div className="heroText">
<p className="topData">Hey, I'm</p>
<h1 className="title">Shubham Pawar</h1>
<p className="heroData">I'm a MERN stack Developer.</p>
<button className="btn">Contact Me</button>
<button className="btn">Resume</button>
</div>
<div className="heroImg">
<img className="heroGif" src={hero} alt="hero img" />
</div>
</section>
</main>
</>
);
}
export default Intro;
Footer.jsx (icons)
import React from "react";
function Footer() {
return (
<>
<footer className="Footer">
<div className="footer-right">
<a href="#">
<img className="footerIcon" src="/linkedin2.png" alt="linkedIn" />
</a>
<a href="#">
<img className="footerIcon" src="/github2.png" alt="GitHub" />
</a>
<a href="#">
<img className="footerIcon" src="/instagram.png" alt="Instagram" />
</a>
<a href="#">
<img className="footerIcon" src="/twitter.png" alt="Twitter" />
</a>
</div>
<div className="footer-left">
<p className="footer-links">
<a className="link-1" href="#">
Home
</a>
About
Contact
</p>
<p>
#mjshubham21 Copyright © {new Date().getFullYear()} All Rights
Reserved.
</p>
</div>
</footer>
</>
);
}
export default Footer;
Output in browser:
I'm currently making a website and am trying to put a picture within a column. On the left, there is some text. The website only displays a broken image:
This is my code so far:
import React from "react";
function Home() {
return (
<div className="home">
<div class="container">
<div class="row align-items-center mb-2">
<div class="col-lg-5 my-5">
<h1 class="font-weight-light ">Home</h1>
<p>redacted</p>
</div>
<div class="col-lg-7 my-5">
<img src="/Users/megan/meganwebsite/src/components/20220502_144614.jpg" alt="photo" class="rounded float-end img-fluid"/>
</div>
</div>
</div>
</div>
);
}
export default Home;
You can change with a way:
import image from './src/components/20220502_144614.jpg'
<img src={image} alt="photo" class="rounded float-end img-fluid"/>
I'm creating a static website using reactjs so I downloaded a template and I divide it on components using reactjs but the responsive collapse navdar doesn't work anymore and I'm trying to fix it so I tried many solutions but I got nothing.
There are no errors but the code still doesn't work.
can you help me please!
this is the navbar component.
import React, {useState,useEffect} from 'react';
import '../assets/css/style.css';
import '../assets/css/slick.css';
import '../assets/css/magnific-popup.css';
import '../assets/css/animate.css';
import '../assets/css/bootstrap.min.css';
import '../assets/css/home7fonts.css';
import Logo from '../assets/images/logos/logo-black.png'
function Header()
{
const [toggleMenu, setToggleMenu] = useState(false)
const [screenWidth, setScreenWidth] = useState(window.innerWidth)
const toggleNav = () => {
setToggleMenu(!toggleMenu)
}
useEffect(() => {
const changeWidth = () => {
setScreenWidth(window.innerWidth);
}
window.addEventListener('resize', changeWidth)
return () => {
window.removeEventListener('resize', changeWidth)
}
}, [])
return (
<header className="main-header header-seven">
<div className="header-upper">
<div className="container-fluid clearfix">
<div className="header-inner d-flex align-items-center">
<div className="logo-outer">
<div className="logo"><img src={Logo} alt="Logo" title="Logo"></img></div>
</div>
<div className="nav-outer clearfix d-flex align-items-center">
<nav className="main-menu navbar-expand-lg">
<div className="navbar-header">
<div className="mobile-logo py-15">
<a href="index.html">
<img src={Logo} alt="Logo" title="Logo"></img>
</a>
</div>
<button onClick={toggleNav} type="button" className="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="navbar-collapse collapse clearfix">
{(toggleMenu || screenWidth > 500) && (
<ul className="navigation onepage clearfix">
<li>Home</li>
<li>about</li>
<li>services</li>
<li>FAQs</li>
<li>pricing</li>
<li>testimonial</li>
<li>blog</li>
</ul>
)}
</div>
</nav>
<div className="header-number">
<i className="fas fa-phone-alt"></i>
<div className="number-content">
<span>Tell Us</span>
+12 ) 235 - 586 - 56
</div>
</div>
<div className="menu-btn">
<a href="#" className="theme-btn style-eight">Start Free Tral
<i className="fas fa-long-arrow-alt-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</header>
);
}
export default Header;
Go to https://getbootstrap.com/docs/5.1/components/navbar/ and Copy one collapse navbar you like. Past the code in your function components and change class to className, etc.
open your public folder at root directory. Find index.html. Add bootstrap Css between <head>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Add Bootstrap JS after <div id="root">,
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
then, reload your react project. See it work.
I am building a react app that is using routes. To better work on a single "page", I use a code playground to mess with the code and aim to implement it into the final react app. However using routes complicates things and I want to know how to implement the script I know works. In the single page react app, my index.js (last snippet) checks elements in the html of one page (the 2 div's in the first code snippet) and will render components (second code snippet) based off the conditional. On my final react app, having multiple of these pages, I am not sure where or how to include the script, as the html document it uses is, itself, a component (first snippet).
//This div is the component that, on click, applies a component to be returned via jsx function. This is a component called ExercisesLauncher.jsx
<div id="Gym/Home/Upper/Lower/Cardio" class="col-lg-4 d-flex align-items-stretch">
<div
style={cursorPointer}
class="card w-100 mb-4 rounded-3 shadow-sm filter"
>
<div class="card-heading py-1">
<h1 class="normal-heading">Gym/Home/Upper/Lower/Cardio</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
//This div is created later in the same file, loading UpperLevel component, root was originally used in the html file (single page) to load components seen later in the question.
<div id="root" class="container">
<UpperLevel />
</div>
//This is the component that is to be loaded, and included are the other components I wish to swap out depending on if a div is clicked. UpperLevel is used in the ExercisesLauncher component
import React from "react";
import Grid from "./Grid";
import GridCardio from "./GridCardio";
import GridGym from "./GridGym";
import GridHome from "./GridHome";
import GridUpper from "./GridUpper";
import GridLower from "./GridLower";
function UpperLevel() {
return (
<div class="album py-5 container">
<GridCardio />
</div>
);
}
export default UpperLevel;
//This code was used for the single page not using routes, in the playground, the DOM references refer to the divs above, that are now in a .jsx file, not an HTML file
var gym = document.getElementById("Gym");
var home = document.getElementById("Home");
var upper = document.getElementById("Upper");
var lower = document.getElementById("Lower");
var cardio = document.getElementById("Cardio");
document.addEventListener("click", function (event) {
if (gym.contains(event.target)) {
ReactDOM.render(<GridGym />, document.getElementById("root"));
} else if (home.contains(event.target)) {
ReactDOM.render(<GridHome />, document.getElementById("root"));
} else if (upper.contains(event.target)) {
ReactDOM.render(<GridUpper />, document.getElementById("root"));
} else if (lower.contains(event.target)) {
ReactDOM.render(<GridLower />, document.getElementById("root"));
} else if (cardio.contains(event.target)) {
ReactDOM.render(<GridCardio />, document.getElementById("root"));
} else {
ReactDOM.render(<Grid />, document.getElementById("root"));
}
});
So far, I tried to paste the script inside the ExercisesLauncher component, as well as importing the necessary components, but the corresponding path just loads a white screen.
Instead of using unnecesarry components, I simply used the jsx code inside the App2 component that is used directly in my index file. I came up with a script that rerenders my grid component upon function call, which is triggered via click. I simply used hooks, useState, to do what I needed to do. Much easier than I thought!
import React, { useState } from 'react';
import {render} from 'react-dom';
import NavBar from "./components/NavBar";
import Grid from "./components/Exercises/Grid";
import GridCardio from "./components/Exercises/GridCardio";
import GridHome from "./components/Exercises/GridHome";
import GridGym from "./components/Exercises/GridGym";
import GridUpper from "./components/Exercises/GridUpper";
import GridLower from "./components/Exercises/GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
//THIS IS ALL RESPONSIBLE FOR LOADING EVERYTHING IN ONE PAGE DONT WORRY ABOUT IT
function App2() {
// const [display, setState] = React.useState(<Grid/>);
let component = <Grid/>;
const [gridState, changePlease] = useState(component);
function applyHome(){
changePlease(<GridHome/>);
}
function applyCardio(){
changePlease(<GridCardio/>);
}
function applyLower(){
changePlease(<GridLower/>);
}
function applyUpper(){
changePlease(<GridUpper/>);
}
function applyHome(){
changePlease(<GridHome/>);
}
function applyGym(){
changePlease(<GridGym/>);
}
return (<section>
<NavBar/>
<main>
<section class="colored-section" id="title">
<div class="container-fluid">
<div class="row">
<div class="container-fluid main-text">
<h1 class="big-heading">Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 class="normal-heading mb-4">Group</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Gym" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyGym} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">Gym</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyHome} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">At Home</h1>
</div>
<div class="card-body">
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 class="normal-heading mb-4">Equipment</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Upper" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyUpper} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyLower} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="album py-5 black-section">
<div id="root" class="container">
{/* THIS WILL CHANGE BASED ON CLICKS */}
{gridState}
</div>
</div>
</section>
<footer id="footer">
<div class="container-fluid">
<a href="index.html">
{" "}
<img class="logo mb-3" src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
</section>);
}
export default App2;
This should do it:
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function Grid() {
const routes = [
{ path: "", name: "Gym", element: <GridGym /> },
{ path: "home", name: "Home", element: <GridHome /> },
{ path: "upper", name: "Upper", element: <GridUpper /> },
{ path: "lower", name: "Lower", element: <GridLower /> },
{ path: "cardio", name: "Cardio", element: <GridCardio /> }
];
return (
<>
<nav>
{routes.map((route) => (
<Link to={route.path} key={route.path}>
Grid{route.name}
</Link>
))}
</nav>
<Routes>
{routes.map((route) => (
<Route {...route} key={route.path} />
))}
</Routes>
</>
);
}
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="grid/">Grid</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="grid/*" element={<Grid />} />
</Routes>
</BrowserRouter>
);
}
I removed the irrelevant parts (e.g imports, etc...).
A full working example here: https://codesandbox.io/s/hungry-davinci-bgmswd?file=/src/App.js
Main takeaway: in React you don't check DOM. DOM renders according to model: you change the model and DOM reflects the change.
I have a dumb component that gets passed down props from a weatherAPI. I want to be able to dynamically change the SVG image depending on what gets sent back from the API. I have installed an npm module react-svg: https://github.com/atomic-app/react-svg. This has a dependency of svg-injector: https://www.npmjs.com/package/svg-injector which I have also installed. Now, I have imported react-svg -> import ReactSVG from 'react-svg';. I then implemented it with inside my dumb component:
const WeatherReport = ({report}) => {
return (
<div style={styles.body} className="row">
<div style={styles.weatherBoxContainer}>
<div className="col-sm-2 col-md-offset-1" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<ReactSVG path={'RELATIVE TO DOCUMENT ROOT I'M SERVING FROM'} callback={(svg) => console.log(svg)} />
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[0].main.temp_max)}°</div>
<div>{Math.floor(report.list[0].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[0].main.temp)}°
</div>
</div>
</div>
CA
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[1].main.temp_max)}°</div>
<div>{Math.floor(report.list[1].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[1].main.temp)}°
</div>
</div>
</div>
UT
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[2].main.temp_max)}°</div>
<div>{Math.floor(report.list[2].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[2].main.temp)}°
</div>
</div>
</div>
MN
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[3].main.temp_max)}°</div>
<div>{Math.floor(report.list[3].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[3].main.temp)}°
</div>
</div>
</div>
DC
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[4].main.temp_max)}°</div>
<div>{Math.floor(report.list[4].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[4].main.temp)}°
</div>
</div>
</div>
NY
</div>
</div>
</div>
);
};
WeatherReport.propTypes = {
report: PropTypes.object
};
export default WeatherReport;
Now, ReactSVG's path needs to be relative to the document root you're serving from NOT relative to the js file that contains ReactSVG. Simple enough right? However, I am using babel and everything is being served as JS, into one file. I am quite new to webpack, babel, react and redux for that matter... Any suggestions on how I am suppose to hit the path to my svg when everything is being compiled into one file?
Assuming the output from your build step in webpack is into a /dist/ folder off your root (for example) you would also want to have a build step to copy any other external files in that folder such as your svg file.
/dist
|- bundle.js
|- myart.svg
Then in your file you can reference the svg simply as
<ReactSVG path="myart.svg" />