codewithashish

React Components

Ashish K's photo
Ashish K
·

2 min read

React components are reusable codes we can use in other components to create a large feature. There are two types of components in react. First is React class components and the second one are functional components:

We can write react class components using below syntax. classcomponent.png

How we can use one component in other: in the above code we are using homepage component in star wars component and passing name input (in react this is known as props) props we can pass from parent component to child component

How we can use props in the child component:

If we are getting props in functional component we need to pass props in the function parameter like below code and we can use props like props.propertyname

react-functional-components.png

in case we are using react class components we can get all props data using this.props

component-react-class.png

React Class Components and Functional Comopnents:

  1. Functional components we can write direct using normal function syntax. class components we will have to write class please refer above images for both components reference.
  2. Functional components are stateless components in which we just pass data and implement as per our requirements. In react class components we can manage states
  3. React components lifecycle methods we can use only in react class components.
  4. React hooks which react introduce after react 16 version we can use in react functional components
React