React- adding Images

App.js (Banner.png has to be added in the src folder)

import React from "react";
import "./App.css";
import banner from "./Banner.png";

function Header(props) {
  return (
    <header>
      <img 
        src={banner} 
        height={200}
        alt="restautant banner" 
        />
      <h1>{props.name}'s Food</h1>
    </header>
  );
}

function App() {
  return (
    <div className="App">
      <Header name="Sarker"/>      
    </div>
  );
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

Output:

image.png

No Comments Yet