Develop Reference

Media query with StyleSheet doesn't work in react-pdf

I have attempted to let 'react-pdf' to change its size by using media query.
I do understand that:
// when I put mouse cursor on <Document>, it displays:
(alias) class Document import Document
<div className="pdf">
<Document file={HomePDF}>
<Page scale={1.5} pageNumber={1} />
</Document>
</div>
is how to adjust the scale in general.
But with media query on css,
#media only screen and (max-width: 600px) {
.home-text {
width: 400px;
}
.pdf {
width: 400px;
}
}
Despite reading the document, I can't get an idea.
https://react-pdf.org/styling#media-queries
The size of pdf displayed on the page does not take effect.
With this error message:
"Compiled with problems:X
ERROR in ./src/pages/Home/Home.js 12:15-32
export 'StyleSheet' (imported as 'StyleSheet') was not found in 'react-pdf/dist/esm/entry.webpack5' (possible exports: Document, Outline, Page, pdfjs)"
I feel like I lost the way. What should I do to change the size of this react-pdf outcome other than the hook? Or is there a way I can do?
// Home.js
import React from "react";
import "./Home.css";
// pdf
import React from "react";
import "./Home.css";
// pdf
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
import { StyleSheet } from "#react-pdf/render";
import HomePDF from "../../pdf/resume.pdf";
const styles = StyleSheet.create({
section: {
width: 200,
"#media max-width: 400": {
width: 300,
},
"#media orientation: landscape": {
width: 400,
},
},
});
function Home() {
return (
<>
<div className="home-wrapper">
{/* layer very back */}
<div className="home-content">
<div className="home-text">
{/* profile picture, box */}
<img
className="profile"
src={require("../../images/me-photo.jpg")}
/>
<hr />
{/* pdf */}
<div className="pdf">
<Document file={HomePDF}>
{/* <Page scale={1.5} pageNumber={1} /> */}
<Page size="A4" style={styles.page} />
</Document>
</div>
</div>
<hr />
</div>
</div>
</>
);
}
export default Home;

Image on React and/or CSS not appearing

I am unable to insert an image to my sign up page. I have tried inserting it using index.js (HTML codes in React component) and also in the corresponding CSS file. Both not working. Sharing the codes and screenshot below (I have removed irrelevant import codes):
React Component code:
import styles from "./register.css";
return(
<div>
<div id="styledImg">
<img alt="" title="" src="../../src/assets/bocLogo.png"/>
</div>
</div>
);
}
export default Register;
CSS code:
#styledImg {
width: 1110px;
height: 428px;
height: 428px;
position: absolute;
top: 245px;
left: 87px;
}
#styledImg Img {
max-width: 100%;
max-height: 100%;
}

You have to import the image and then use the imported file as src.
it would be something like this.
import logo from '.../../src/assets/bocLogo.png';
and then you will use this logo in src
<img src={logo} alt="Logo" />;
for more information please check This link

You have to upload that image as a ReactComponent.
import { ReactComponent as Logo } from "../../assets/your-image.png";
So that should look like:
import styles from "./register.css";
import { ReactComponent as Image } from "../../assets/your-image.png"
return(
<div>
<div id="styledImg">
<img alt="" title="" src={Image}/>
</div>
</div>
);
}
export default Register;

Linking Image Issue

I am trying to link my picture but it's not working
Any idea what I have forgotten?
Code:
import React, { Component } from 'react';
export default class Card extends Component {
render() {
return (
<div>
<img src="../img/img_avatar.png" alt="Card"></img>
</div>
);
}
}
[Structure][1]

Images are self-closing tags, so you would use it like:
<img src="../img/img_avatar.png" alt="Card" />
instead of what you're using.

How to display an image in React.js with Bootstrap

Sorry if this is a duplicate question. I can't seem to solve this or find an answer.
Essentially I want to display an image so it responsively adjusts depending on screen size. I'm using the React-Bootstrap example and it just isn't working. Here is the code I'm using and here is a link to the example https://react-bootstrap.github.io/components.html#media-content .
import React from 'react';
import {ResponsiveEmbed, Image} from 'react-bootstrap';
export default React.createClass ( {
render() {
return (
<div style={{width: 660, height: 'auto'}}>
<ResponsiveEmbed a16b9>
<embed type="image/href+xml" href = "https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg"/>
</ResponsiveEmbed>
</div>
);
}
});
This is the App.jsx file it connects too
import React from "react"
import { render } from "react-dom"
import Footer from "./components/Footer"
import HeaderNavigation from "./components/HeaderNavigation"
import App1Container from "./containers/App1Container"
import Carousel from "./components/Carousel"
class App1 extends React.Component {
render() {
return (
<div>
<HeaderNavigation />
<Carousel />
<App1Container/>
<Footer/>
</div>
)
}
}
render(<App1/>, document.getElementById('App1'))

If you want just image why not to use:
<Image src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" responsive />

Bootstrap Jumbotron stuff does not deal with background image. Try this instead
at top of file:
import Jumbotron from "./src/img/1.png"
in your div:
<img style={{height:'auto',width:'100%'}} src={ Jumbotron }/>

Try replacing this code:
const responsiveEmbedInstance = (
<div style={{width: 500, height: 'auto'}}>
<ResponsiveEmbed a16by9>
<embed type="image/svg+xml" src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" />
</ResponsiveEmbed>
</div>
);
Here is an example: http://jsfiddle.net/jayesh24/ywzw5hrt/

It should be a16by9 and not a16b9. Answered by rishipuri

Use react-bootstrap package
import Image from "react-bootstrap/Image";
import "bootstrap/dist/css/bootstrap.css";
<Image src="image.png" fluid/>

How to create a composite React.js component from components in multiple jsx files

I'm learning how to program with React.js and do not understand how to create a composite React.js component from components in multiple jsx files. I am able to make composite components from individual components inside a single jsx file, but when I try to use a component from one jsx file in the other jsx file, the component is not recognized (out of scope). I'm not sure if it matters, but I am using Visual Studio 2015 for my IDE and the two jsx files are part of the Visual Studio project.

Import them like this.
import React from 'react';
import DropDownMenu from './dropdown.menu';
import DropDownSelect from './dropdown.select';
let AppCtrlSty = {
height: '100%',
padding: '0 10px 0 0'
}
let DropDownSty = {
border: 'solid 1px darkslategrey',
height: 'calc(100% - 10px)',
overflow: 'auto',
paddingLeft: '0',
width: '33%'
}
export default class AppCtrl extends React.Component {
render() {
return (
<div id='AppCtrlSty' style={AppCtrlSty}>
React 1.4 DropDown<br/><br/>
<div id='menuColumns' className='FlexBox' style={{height: '100%'}}>
<div id='DropDownMenu' style={DropDownSty}>
<DropDownMenu />
</div>
<div id='DropDownSelect' style={DropDownSty}>
<DropDownSelect />
</div>
</div>
</div>
);
}
}