React Components Class component example:

1 import { Component } from 'react';

React, a JavaScript library, is the most popular front-end framework in tech by Key terms: 2 class MyComponent extends React.Component {
usage. Components are one of React's fundamental building blocks. Here's 3 constructor(props) {
what to know about them. Constructor: The method that 4 super(props);
initializes a React object’s state. It's 5 this.state = { currState: true }
React components: automatically called when an object 6 }
is created in a class and before a 7 render() {
• Serve the same purpose as JavaScript functions, except they effectively
divide the UI into reusable components that return HTML. component is mounted. 8 <div>
• Are independent mixtures of JavaScript and HTML. 9 <p>Hello, World!</p>
• Come in two types: class and functional components. Hooks: Allow you to "hook" into 10 </div>
• Class components took a back seat to functional components with React features such as state and 11 }
React version 16.8 but are still supported.
lifecycle methods in functional 12 }
Example: components.

Functional component examples:

1 function WelcomeMessage() { Lifecycle events: Each component
2 return ( has a lifecycle that you can monitor Using function keyword
3 <p>Hello, World</p> and manipulate during its four main
4 ) phases: mounting, updating,
1 function MyComponent(props) {
5 } unmounting, and error handling.
2 return (
6 export default WelcomeMessage; 3 <div>
Lifecycle methods: Methods you
4 <p>Hello, World</p>
can invoke during lifecycle phases to
This code defines a function named WelcomeMessage() that can be rendered in place 5 <p>Have a nice day!</p>
of a placeholder <WelcomeMessage /> in the main JavaScript file. You just need to update the DOM to reflect new state
6 </div>
import the function into the main JS file: information.
7 );
8 }
1 import WelcomeMessage from "./WelcomeMessageComponent"; Props: Props (properties) are passed
2 to React components. Akin to
3 return ( function arguments in JavaScript Using arrow function syntax
4 <WelcomeMessage /> and attributes in HTML.
5 ) 1 const MyComponent = (props) => {
React.Component: A class in React 2 return (
extended to create class 3 <div>
components. 4 <p>Hello, World</p>
Class vs functional components: 5 <p>Have a nice day!</p>
Render function: A required method 6 </div>
Class components: Functional components: in class components that returns an 7 );
• Extend from React.Component • Don't extend from React.Component HTML element. 8 }
• Known as stateful components • Known as stateless components
• Respond to lifecycle events • Don't respond to lifecycle events State: An updatable structure that
• Maintain state information • Don't maintain state information
• Support props • Accept any type of data (props) holds component data and makes a
• Require a constructor to store state • Don't support a constructor component dynamic and interactive.
before they can be used to pass props to • Return HTML elements or nothing
the parent class • Support React 16.8 hooks
• Require a render function that returns an
HTML element