Hooks are an experimental proposal to React. You don’t need to learn about them right now. Also, note that this post contains my personal opinions and doesn’t necessarily reflect the positions of the React team.
React breaks down the UI into smaller and reusable components that can move around data amongst each other. This breaking down of the UI is what gives React an edge over Vanilla JS. … This is where React comes in with a great feature i.e its own virtual DOM. The virtual DOM is a shortcut to bypass the manual work.
Vanilla JS initially renders the UI anywhere from 5-10x faster than Preact, and about 30x faster than React! Handling UI state changes with vanilla JS is also orders of magnitude faster than using Preact or React
A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element. A class component requires you to extend from React. Component and create a render function which returns a React element. There is no render method used in functional components.
Functional Components: Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function
const Car=()=> {
return <h2>Hi, I am also a Car!</h2>;
}
Class Component: This is the bread and butter of most modern web apps built in ReactJS. These components are simple classes (made up of multiple functions that add functionality to the application)
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Functional Components Functional components are basic JavaScript functions. Children / Child Components children is a special property of React components which contains any child