what is component in react - Interview Questions https://www.wikitechy.com/interview-questions/tag/what-is-component-in-react/ Interview Questions Wed, 04 May 2022 07:16:09 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 What are the types of React component ? https://www.wikitechy.com/interview-questions/reactjs/what-are-the-types-of-react-component/ https://www.wikitechy.com/interview-questions/reactjs/what-are-the-types-of-react-component/#respond Sat, 26 Mar 2022 10:47:23 +0000 https://www.wikitechy.com/interview-questions/?p=4001
  • 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 merge them all in a parent component which will be your final UI.
  • React Component basically return a piece of JSX code that tells what should be rendered on the screen.
  • In React component there are two types:
    • Functional Components
    • Class Components

    • Functional Components

    • Functional components are simply JS functions.
    • In React we can create Functional Component by writing a JS function.
    • 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.
    • It does not require data from other components.

    For example,

    [pastacode lang=”markup” manual=”const%20Democomponent%3D()%3D%3E%0A%0A%C2%A0%C2%A0%C2%A0%20%7B%0A%0A%C2%A0%20%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch1%3EWelcome%20to%20Kaashiv!%3C%2Fh1%3E%3B%0A%0A%C2%A0%C2%A0%C2%A0%20%7D” message=”” highlight=”” provider=”manual”/]

    Class Components

    • 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.
    • The class components can work with each other where functional components are not aware of the other components in your program.
    • From one class component to other class components, we can pass the data.
    • In React we use JavaScript ES6 classes to create class-based components.

    For example,

    [pastacode lang=”markup” manual=”class%20Democomponent%20extends%20React.Component%0A%20%20%20%7B%0A%20%20%20%20%20%20%20render()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%3Ch1%3EWelcome%20to%20Kaashiv!%3C%2Fh1%3E%3B%0A%20%20%20%20%20%20%7D%0A%20%20%7D%0A” message=”” highlight=”” provider=”manual”/] ]]>     https://www.wikitechy.com/interview-questions/reactjs/what-are-the-types-of-react-component/feed/ 0