---
# System prepended metadata

title: important Note of Components

---

# important Note of Components

import React, { Component } from 'react';
import React from 'react';

/* there are two type of Component 
1:-functional Component
2:-class Component */

// functional Component
function Header ({ name }) { // (props)
  return <header>
    { name }
  </header>
}


// class Component
class App extends Component {
  constructor() {
    super();
  }
}

/* we can render our code from 3 type(hum 3 method use kar sakte hai return ke ander 
code ko likhne ke liye)
1:--short form <>start and </>end
2:- Component start<Fragment> and end</Fragment>  
3:- start<React.Fragment> and end with </React.Fragment>*/

  render() {
    // short form
    return (
      <>
        <Header name="MyApp" />
      </>
    );

    // Component
    return (
      <Fragment>
        App
      </Fragment>
    );

    return (
      <React.Fragment>
        App
      </React.Fragment>
    )
  }
}

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