What is component in reactjs
Download as PPTX, PDF•0 likes•678 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)
Ad
Similar to What is component in reactjs (20)
Ad
More from manojbkalla (18)
Recently uploaded (20)
PDF
Teaching Reproducibility and Embracing Variability: From Floating-Point Exper...University of Rennes, INSA Rennes, Inria/IRISA, CNRSTeaching Reproducibility and Embracing Variability: From Floating-Point Exper...University of Rennes, INSA Rennes, Inria/IRISA, CNRS
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