React Image Code 2
React
import React from 'react'; <!-- React 17 import method --> import ReactDOM from 'react-dom'; <!-- React 18 upgraded import method --> import ReactDOM from 'react-dom/client'; import picture from './p15.jpg <!-- Function Component --> function Picture() { return <> <img src={picture} className="image" /> </> } <!-- React 17 render method --> ReactDOM.render(<Picture />, document.getElementById('root')); <!-- React 18 upgraded render method --> const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Picture />); <!-- Separate File Component --> const GetPicture = () => { return <> <img src={picture} className="image" /> </> } export default GetPicture; <!-- OR in short --> export const GetPicture = () => { return <> <img src={picture} className="image" /> </> }
CSS
.image{ width: 200px; height: 200px; outline: 10px solid #62dddf; border: none; }
Follow Us
