Categories: React Development
Tags:

React Components Example

Nav.jsx file inside src >> components Looks like 

import React from 'react'
import './Nav.css'

const Nav = () => {
  return (
    <div className='bg-dark'>Navbar</div>
  )
}

export default Nav

CustomerCard.jsx

import React from 'react'
import customer from '../assets/customer.jpg'
import './CustomerCard.css'

const CustomerCard = (props) => {
  return (
    <div className="bg-primary">
        <h4>{props.name}</h4>
        <img className="custImage" src={props.cimage} alt={props.name}></img>
        <p>{props.address}</p>

    </div>
  )
}

export default CustomerCard

CustomerCard.css

.bg-primary{
    background-color: rgb(134, 134, 190);
    padding: 10px;
}
.custImage{
    height: 50%;
    border-radius: 50%;
}

Props Example

  <CustomerCard name="John Doe" address="New York" cimage={c1}/>
     <CustomerCard name="Mohan Sharma" address="Lucknow" cimage={c2}/>
     <CustomerCard name="Tina Jax" address="London" cimage={c3}/>