SlideShare a Scribd company logo

What is component in reactjs

•Download as PPTX, PDF•
•
M
manojbkalla

Components are the building blocks of React applications. There are two main types of components: functional components and class components. Functional components are simple functions that return JSX and are stateless, while class components extend React.Component and can hold state and lifecycle methods. Other component types include pure components and high-order components. Components are independent and reusable code used to build up the UI of a React application from smaller parts.

Related slideshows

React js
React jsReact js
React js
 
React hooks
React hooksReact hooks
React hooks
 
Introduction to react js
Introduction to react jsIntroduction to react js
Introduction to react js
 
1 of 11
Understanding What is Component? Types of Components
What is component in reactjs
What is Component? •Basic meaning of component is “one of several parts of which something is made” •In ReactJS one UI page is consists of so many component(s). •Components are independent and reusable code. Building blocks of ReactJS Application.
What is Component? •Components is like JavaScript functions, but work individually to return JSX code as elements for UI. •Parent Component is group of all child components.
Types of Components  Functional Components  Class Components  Pure Component  High-Order Components
•Its like a function that takes in props and return JSX. •JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. JSX allows us to write HTML in React. •Functional component is also known as a stateless component because not hold or manage state. Functional Component
• Example: Hello.js // Functional Component Example import React from 'react'; function Hello(props){ return ( <h1> Welcome to Learn {props.name} </h1> ) } export default Hello; Functional Component
• Example: HelloWorld.js // Functional Component Example import React from 'react'; const HelloWorld =()=> { return ( <div> <p>Hello World!</p> </div> ) } export default HelloWorld; Functional Component
•Declaring this component as Class type. •Class components are child classes of React.Component Class Component
// Class Component Example import React from 'react'; class ViewHelloWorld extends React.Component { render() { return ( <div> <p>Hello World!</p> </div> ) } } export default ViewHelloWorld; Class Component
What is component in reactjs

More Related Content

What is component in reactjs

  • 3. What is Component? •Basic meaning of component is “one of several parts of which something is made” •In ReactJS one UI page is consists of so many component(s). •Components are independent and reusable code. Building blocks of ReactJS Application.
  • 4. What is Component? •Components is like JavaScript functions, but work individually to return JSX code as elements for UI. •Parent Component is group of all child components.
  • 5. Types of Components  Functional Components  Class Components  Pure Component  High-Order Components
  • 6. •Its like a function that takes in props and return JSX. •JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. JSX allows us to write HTML in React. •Functional component is also known as a stateless component because not hold or manage state. Functional Component
  • 7. • Example: Hello.js // Functional Component Example import React from 'react'; function Hello(props){ return ( <h1> Welcome to Learn {props.name} </h1> ) } export default Hello; Functional Component
  • 8. • Example: HelloWorld.js // Functional Component Example import React from 'react'; const HelloWorld =()=> { return ( <div> <p>Hello World!</p> </div> ) } export default HelloWorld; Functional Component
  • 9. •Declaring this component as Class type. •Class components are child classes of React.Component Class Component
  • 10. // Class Component Example import React from 'react'; class ViewHelloWorld extends React.Component { render() { return ( <div> <p>Hello World!</p> </div> ) } } export default ViewHelloWorld; Class Component