What is component in reactjs
Download as PPTX, PDF0 likes671 views
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.
1 of 11
Download to read offline
More Related Content
What's hot (20)
PPTX
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay VermaÂ
Similar to What is component in reactjs (20)
Ad
More from manojbkalla (18)
Ad
Recently uploaded (20)
PDF
Beyond Binaries: Understanding Diversity and Allyship in a Global Workplace -...Imma Valls BernausÂ
What is component in reactjs
- 1. Understanding ïWhat is Component? ïTypes of Components
- 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