We Keep Coding

image dont show up(react)

im trying to put an image in my page but it wont show up.even though there are no errors here is my code:
import React from "react";
import img1 from './images/earth-icon.png';
export default function Navbar() {
return(
<div className="header">
<h2 className="title">My Travel</h2>
<img src={img1} alt="cam" />
</div>
)
}
thank you!
i tried to put the image in the public folder and try it like this:
import React from "react";
export default function Navbar() {
return(
<div className="header">
<h2 className="title">My Travel</h2>
<img src="./images/earth-icon.png" alt="cam" />
</div>
)
}
but its the same result.

If you put the image directly into the public folder, then the path of the image changes.
So, if your image is placed like this:
- public
- earth-icon.png
// other folders like src etc.
Instead of
<img src="./images/earth-icon.png" />
try
<img src="/earth-icon.png" />
This url will get translated to https://example.com/earth-icon.png which will point to your public folder.
If you need the same folder structure with images etc. Ensure that the image is placed under a images folder inside public. The you would be able to do:
<img src="/images/earth-icon.png" />
Note that ./ points to the current directory whereas just / points to the public folder

i placed the images folder in the public folder and then i edited the code to be like this:
import React from "react";
export default function Navbar() {
return(
<h2 className="title">My Travel</h2>
<img src="/images/earth-icon.png" alt="" />
</div>
)
} but its the same result no image.

How to show a specific image from a group as the one in focus

Greetings fellow nerds,
Hope you had a great thanksgiving. I have been working on my portfolio website lately and have almost completed it. Luckily this time I saved the best problem for last, but I haven't had any luck hacking it.. so hopefully one of you has a helpful answer.
So here's the problem:
I have a slider on my front page which at the moment shows the slider starting from the top of the 1st image. Which makes sense of course. But what if I would wish to have it start in focus on the 2nd image?
I tried something with the index without any luck. But here's two pictures that can hopefully help explain the problem:
Bad:
Good:
Scroll container code:
import React from "react";
import { ProjectData } from "../projects/ProjectData";
import ProjectImage from "./ProjectImage";
import ScrollContainer from "react-indiana-drag-scroll";
import "./scss/ProjectCarousel.scss";
export default function ProjectCarousel() {
return (
<ScrollContainer className="scroll-container">
{ProjectData.map(({ id, ...otherProps }) => (
<ProjectImage key={id} {...otherProps} />
))}
</ScrollContainer>
);
}
Project image component code:
import React from "react";
import GitIcon from "../soMe/icons/github_legend.png";
import "./scss/Project.scss";
export default function ProjectImage({ imageUrl, alt, github,
webUrl }) {
return (
<div className="image">
<a href={webUrl} alt="Go to this project's website">
<img src={imageUrl} alt={alt} />
<a href={github} alt="See project on Github">
<div className="overlay">
<img src={GitIcon} alt={alt} />
</div>
</a>
</a>
</div>
);
}
Appreciate any hints or solutions

The images required a fixed height to be rendered and picked up by the scrollto

React.js NavBar: Is it possible to reference a different component's markup? (Trying to create a navbar that references to components in one route)

Basically I'm trying to make a navbar for a personal website application in which the navbar references content (About/Skills, etc.) all on single page (route). When making the navbar, I can easily reference markup with ids/classes BUT I would have to put all the html in one file.
I noticed that if I were to separate each content into its own react file (About.jsx, Skills.jsx, etc.) and import them, there didn't seem to be a way for me to reference the react component's markup.
I also noticed with react router, this wasn't feasible because each component would be on a separate route (which I don't want) rather than on a single route.
This is my current navbar file below; How exactly Can I import and reference the markup of the separate components?
import React from 'react';
import "../Styles/NavBar.scss";
import About from "./About.jsx"; (Not used)
import Skills from "./Skills.jsx"; (Not Used)
import Projects from "./Projects.jsx"; (Not used)
const NavBar = () => (
<div class="MainDivWrapper">
<div class="NavBarDiv">
<h1 class="NavBarH1">NavBar</h1>
<br/>
<nav>
About
Skills
Projects
</nav>
{/* <div id="AboutDiv">
<h1>About Me</h1>
<span>Just some text</span>
</div>
<div id="SkillsDiv">
<h1>Skills</h1>
<span>Just some text</span>
</div>
<div id="ProjectssDiv">
<h1>Projects</h1>
<span>Just some text</span>
</div> */}
</div>
<hr class="HeaderDivider"/>
</div>
)

You reference a JSX import like that:
/* Component have to start with a capital letter. file name can be anything (usually is the same as component) */
import MyComponent from "./MyComponent"
export default function MyApp() {
return (
<div>
/* other html/components here */
<MyComponent /> // selfing close tag
/* or */
<MyComponent> // with `children`
some content
</MyComponent>
</div>
)
}
Here is a codesandbox implementation of your code: https://codesandbox.io/s/stack-reactjs-navbar-is-it-possible-to-reference-a-different-components-markup-64oic?file=/src/App.js

Modifying Shopify Polaris Styles - Reactjs

I am trying to modify Shopify Polaris Button components colors for React, I tried to change style.css file but nothing happened.
Any idea how to do so?
App.js
import React, { Component } from 'react';
import '#shopify/polaris/styles.css';
import {Page, Card, Button} from '#shopify/polaris';
class App extends Component {
render() {
return (
<div className="App">
<Page title="Example app">
<Card sectioned>
<Button onClick={() => alert('Button clicked!')}>Example button</Button>
</Card>
</Page>
</div>
);
}
}
export default App;
I am trying to modify node_modules/#shopify/polaris/styles.css , but it does not make ay effect to button color.

The Polaris design system is meant to provide consistency to apps within the Shopify ecosystem. It’s not intended as an alternative to something like Bootstrap or Foundation, so changing button colors wasn’t something we built the library to support.

Even thou full colorizing on a button isn't possible. You can partially modify a button like so:
<div style={{color: '#bf0711'}}>
<Button monochrome outline>
Click Me
</Button>
</div>
This won't give you full control to like the background color but it can help to partially stylize the button. It creates an outline and light background when you roll over.

Calling different components into rows in React

I have a very basic question that I cannot comprehend and need some help. I'm creating a really small React project for my personal website. I have App.js that is calling all the different components such as header, intro and etc:
import React from 'react';
import Header from './Header';
import Intro from './Intro';
export default class App extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-6">
<Header />
</div>
</div>
<div className="row">
<div className="col-xs-6">
<Intro />
</div>
</div>
</div>
)
}
}
As you can assume, header is just the top portion of the page and intro (currently) just says some text. This is what it looks like:
The second component is being blocked by the first component. Can someone explain how React works with components in terms of how it's rendered on the web page? Or is this purely a HTML issue in App.js?