First lets talk about both in brief -
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Props are like function arguments, and we send them into the component as attributes.
Technically,Components are like javascript functions.They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
The simplest way to define a component is to write a JS function :
We can also use an ES6 Class to define a component:
The above two components are equivalent from react's point of view.
Key difference between a functional component and a class component is the lack of state and life-cycle methods in the former.
That's Why functional components are also commonly referred to as stateless components.
BUT with newer versions of React, now we can add state even in functional components by using "React Hooks".
a functional component by default, doesn't contain state.
Elements can also represent user-defined components.When React sees an element representing a user defined component,it passes JSX attributes and children to this component as single object called Props.
for example, this code renders "Hello Aditya" on the page :
To conclude there are two things to remember which are :
Always start component names with a capital letter so that React can differentiate between a DOM tag ( like ) and a component.
Props are read only :Whether you declare a component as a function or a class, it should never modify its own props.
Thanks for reading !
Top comments (1)
Nice article