I have been trying to add a background image to my webpage. This is how I am currently trying to do it but it doesn't seem to work.
in my App.js file:
import React from 'react';
import './App.css';
import NavBar from './Components/NavBar';
import LandingPageImage from './Components/LandingPageImage';
function App() {
return (
<div className="App">
<div className="Screen" >
<NavBar/>
<LandingPageImage/>
</div>
</div>
);
}
export default App;
in my App.css file:
.Screen {
background-image: url("https://images.unsplash.com/photo-1536514498073-50e69d39c6cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80");
}
This doesnot seem to work. I was expecting to see the background image on the Screen div but nothing shows up.
The code is correct. I am thinking your <Navbar /> and <LandingPageComponent /> cover the entire div with their own backgrounds hence you are not seeing it.
Try adding some text to the div to see if it is working properly.
import React from 'react';
import './App.css';
import NavBar from './Components/NavBar';
import LandingPageImage from './Components/LandingPageImage';
function App() {
return (
<div className="App">
<div className="Screen" >
<NavBar/>
<LandingPageImage/>
Text to give additional height to div.
</div>
</div>
);
}
export default App;
Related
This is my App.js. Here, I call the "Profile" Component.
import './App.css';
import Profile from "./Profile"
function App() {
return (
<div className="App">
<Profile />
</div>
);
}
export default App;
Then, inside Profile.js, I call Card component and inside the Card component, I've enclosed an image.
import React from 'react'
import Card from './Card'
import styles from "./Profile.module.css"
import image1 from "./assets/profile1.png"
const Profile = () => {
return (
<Card>
<div>
<img src={image1} alt="" />
</div>
</Card>
)
}
export default Profile
Inside of Card component, I've just applied some CSS to make it look like a Card.
import React from 'react'
import styles from "./Card.module.css"
const Card = () => {
return (
<div className={styles.card}>
</div>
)
}export default Card
This is my folder structure.
I'm really confused why the image isn't getting showed up. Currently this is the output I'm getting.
I've restarted the server as well. But it's not getting fixed.
your card doesn't have a child component return maybe that could be the problem
import React from 'react'
import styles from "./Card.module.css"
const Card = ({children}) => {
return (
<div className={styles.card}>
{children}
</div>
)
}
export default Card
try this
I am getting a message "no internet" meaning my image has an error but I don't know how to rectify it. The code is as shown below:
import React from 'react';
import './Footer.css'
function Footer(props) {
return (
<div className='footer-container'>
<div className='footer-parent'>
<img src={require('../../../assets/Home/shape-bg.png').default} alt='no internet connection'/>
</div>
</div>
);
}
export default Footer;
There are two ways how to display images in React:
import React from 'react';
import './Footer.css'
function Footer(props) {
return (
<div className='footer-container'>
<div className='footer-parent'>
<img src={require('../../../assets/Home/shape-bg.png')} alt='no internet connection'/>
</div>
</div>
);
}
export default Footer;
I don't get your ".default".. Or just do it that way:
import React from 'react';
import './Footer.css'
import image from '../../../assets/Home/shape-bg.png'
function Footer(props) {
return (
<div className='footer-container'>
<div className='footer-parent'>
<img src={image} alt='no internet connection'/>
</div>
</div>
);
}
export default Footer;
Here I just imported that image on top of that file and paste that image into <image src />.
It looks like there is no trigger at all when I click specific item in Navbar, at one point it kinda worked, url was at least changing when I click li, but now even that doesn't work.
Beside this, I have also set the ID for each of the components.
This is App.js
import React, { useState } from 'react';
import logo from './icons/logo.svg';
import Landing_Nav from './pages/landing/Landing_Nav';
import Landing_Hero from './pages/landing/Landing_Hero';
import Landing_Organization from './pages/landing/Landing_Organization';
import Landing_Toolkit from './pages/landing/Landing_Toolkit';
import Landing_Idea from './pages/landing/Landing_Idea';
import './styles/root.scss';
function App() {
return (
<div className="landing_content">
<Landing_Nav />
<Landing_Hero />
<Landing_Organization />
<Landing_Toolkit />
<Landing_Idea />
</div>
)
}
export default App;
This is Landing_Nav.js
import React, { useState } from 'react';
import logo from '../../icons/logo.svg';
import '../../styles/root.scss';
import '../../styles/landing-navigation.scss';
import { Link } from "react-scroll";
function Landing_Nav() {
return (
<div className="navigation">
<img src={logo} className="logo-img"/>
<div className="nav-right-content">
<ul className="nav-on-page">
<Link
activeClass=""
to="organization-link"
spy={true}
smooth={true}
offset={-70}
duration= {500}
><li>Organization</li></Link>
</ul>
<button className="btn-primary">Create Together</button>
</div>
</div>
)
}
export default Landing_Nav;
Inside your Landing_Organization component you have the id of that component set to "organization-link". I believe you need to set the name attribute to "organization-link" for the react-scroll library to work as intended.
In reactjs, I have already created one component and added it to my Main.js file but now, I need to add one more component to it and due to JSX restriction of having only one root element per JSX, I cannot add one more component to it. I don't know where I'm going wrong in this.
`~~~~index.js file`
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
ReactDOM.render(
<Main/>,
document.getElementById("root")
);
-------------------------------------------------------
Main.js file
import React, { Component } from "react";
import Header from './Header';
// import Body from './Body';
import './index.css';
class Main extends Component {
render() {
return (
<div className="Main">
<Header image={require('./demo.jpg')}/>
{/* <Body/> */}
</div>
);
}
}
export default Main;
-------------------------------------------------------
Header.js file
import React from 'react'
import './Header.css';
// import Body from './Body';
export default (props) => {
const style= {
backgroundImage : "url(" + props.image + ")"
}
return (
<div className="body" style={style}>
<button className="btn" > Drawer </button>
<h1 className="heading1"> Questions </h1>
<button className="heading2"> Eye Button </button>
<h2 className="heading3"> Hi.. Sandeep Gautam </h2>
<h3 className="heading4"> Mind answering a few questions </h3>
</div>
)
}`
I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:
CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8
Here's my index.js file code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and the App.js where I have imported the new component:
import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';
class App extends Component {
render() {
return(
<div className="App">
Hello React
<CountDown/>
</div>
);
}
}
export default App;
Finally, my Countdown component code:
import React from 'react';
const CountDown = (props) => {
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
};
export default CountDown;
Do I need to also import my new component here? How do I solve this issue. Thanks.
Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.
import React from 'react';
const CountDown = (props) => (
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
);
export default CountDown;
That should do it.
CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.
Had the same problem with this:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
Instead it had to be:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}