---
# System prepended metadata

title: Function based components

---

# Function based components

```javascript=
// simple component
function App() {
  return (
   <div>
      Hello Function
   </div>
  )
}

// props simple
function App(props) {
  return (
   <div>
      Hello { props.message }
   </div>
  )
}

// destructure props 
function App({ message }) {
  return (
   <div>
      Hello { message }
   </div>
  )
}
/*
 *  Empty Object
 props = {}
 
 passing any property like message="World"
 props = {
   message: "World"
 }
 
 destructure of props
 { message } = props inside { message: "World" }
 * */
```