A component is combination of
1. Template using HTML
2. User Interactivity using JS
3. Applying Styles using CSS
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?
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.
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.
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.
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(‘ ‘)