1.Component :- its the building block of react app, just like functions, we create components to perform some functionality. It takes the given parameters (called as props) and render UI in the browser by consuming the given parameters.
Example:- we need to display contact details of a person so we’ll create the below component which takes the props as parameter when we use this component.
a)Using class syntax to create component,
b)Component uses the render method to return the UI component to the calling parent component.
c)Export the component and it will imported with this name and used inside calling parent component
d)Calling a component with props.
2.Props, its like parameters to components like we have arguments to a function, we use them to pass data to components.
a)How to pass data :-
b)Access the prop in the component by using this keyword (refering to the current context)
Note:- props refer to attributes from parent components. It represents “read-only” data that are immutable.
3.Stateless function component, incase our component just returns the UI component we can use function to create a component instead of creating a class
a)What changes we have to do?
- Function will take passing prop as argument
- Returns the description UI
- this keyword is not used in accessing the props inside function.
Stateless function component for above class component:-
4.State:- represents mutable data that ultimately affects what is rendered on the UI. State is managed internally by the component itself and is meant to change over time, commonly due to user input (e.g., clicking on a button on the page).
a)To create state it should be declared inside a Class
b)How to pass state to a component
One of the key benefits of using State in React to build UI components: when it comes to re-rendering the page, we just have to think about updating state. We don’t have to keep track of exactly which parts of the page change each time there are updates. We don’t need to decide how we will efficiently re-render the page. React compares the previous output and new output, determines what has changed, and makes these decisions for us. This process of determining what has changed in the previous and new outputs is called Reconciliation.
Note:- In React UI is function of state, when state changes UI also changes.