<\/p>\n

Functional Components<\/h4>\n

<\/p>\n

\n
• Functional components are simply JS functions.<\/li>\n
• In React we can create Functional Component by writing a JS function.<\/li>\n
• To create React app efficient, we use functional component only when we are sure that our component does not require to interact with any other components.<\/li>\n
• It does not require data from other components.<\/li>\n<\/ul>\n

  For example,<\/strong><\/p>\n

  <\/div>

  const Democomponent=()=>\u00a0\u00a0\u00a0 {\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return <h1>Welcome to Kaashiv!<\/h1>;\u00a0\u00a0\u00a0 }<\/code><\/pre> <\/div>\n
  <\/h4>\n
  Class Components<\/h4>\n
  \n
  The class components are much like the functional component but has a few additional capabilities that makes class component a little more complicated than the functional components.<\/li>\n
  The class components can work with each other where functional components are not aware of the other components in your program.<\/li>\n
  From one class component to other class components, we can pass the data.<\/li>\n
  In React we use JavaScript ES6 classes to create class-based components.<\/li>\n<\/ul>\n
  For example,<\/strong><\/p>\n
   
   <\/div> 
  class Democomponent extends React.Component   {       render(){             return <h1>Welcome to Kaashiv!<\/h1>;      }  }<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"
  It is one of the core building blocks of React. In React we develop every application and it will be made of pieces, that is known as component. Components make the task of building UIs much easier. We see that UI broken down into multiple individual pieces called components and work on them independently and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[16542],"tags":[16594,16755,16756,16754,16749,16750,16746,16747,16752,16748,16753,16751],"class_list":["post-4001","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-class-component-react","tag-functional-component-react","tag-react-component-example","tag-react-component-lifecycle","tag-react-components","tag-react-top-level-api-components-and-its-types-in-reactjs-what-are-the-types-of-components-available-in-react","tag-reactjs-components","tag-types-of-react-components","tag-types-of-react-js","tag-what-are-the-types-of-components","tag-what-is-component-in-react","tag-what-is-the-type-of-a-react-component"],"yoast_head":"\n