React Components
The react components are independent and reusable bits of code. The react components serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render () function.
A component is combination of
1. Template using HTML
2. User Interactivity using JS
3. Applying Styles using CSS
The React app will have many components like header component, navbar component, footer component and content component. Conceptually a component is a JavaScript class or function that accepts inputs which are properties(props) and returns a React element that describes how a section of the User Interface should appear. A component can be created as Function Component or Class Component.
For creating a React component, the component’s name must begin with an uppercase letter.
Recently functional components are becoming very popular in react, so why is that?
First we see that, the clear difference is the syntax. Just like in their component names, a functional component is just a plain JavaScript function that returns JSX. The class component is a JavaScript class which extends React.Component. It has a render method. A bit confusing? Let’s take brief look
Class component
Class components were the only way to track state and lifecycle on a React component before react version 16.8. Function components were considered “state-less”.
The class component, a stateful/container component. The class component is a regular ES6(ECMAScript 6) class that extends the component class of the React library. The class component called a stateful component because it controls how the state changes and the implementation of the component logic. The class component have access to all the different phases of a react lifecycle method.
Functional Components
These are simply JavaScript functions. A Function component also returns HTML, and behaves in same way as a Class component, but Function components can be written using less code, are easier to understand.
With the addition of Hooks, Functional components are now almost equivalent to Class components. There is minor difference using functional components rather than class components.
Most probably Functional components are used in react. There are nos plans on removing Class components from React.
Difference
Class component:
1. The class component is created by extending React.Component which creates a render () function that returns a react element.
2. It must have the render() method returning JSX (which is syntactically similar to HTML) 3. Class component is instantiated andSeveral life cycle methods are active to run & get invoked depending on the phase of the class component.
4. Functional components implements logic and state so they are referred to as Stateful components.
5. componentDidMount() method of react lifecycle can be used in functional components.
Functional component:
1. The functional components are plain javascript function which accepts props as argument & returns a react element.
2. render() function is not used in functional components.
3. Functional components run from top to bottom and once the function is returned it can’t be kept alive.
4. Functional components or Stateless components accept the data and display that data same format, as they are mainly responsible for rendering UI.
5. componentDidMount() method of react lifecycle cannot be used in functional components.
6. To make the functional components Stateful components, we can make use of hooks. eg: const [name,SetName]= React.useState(‘ ‘)
