React Components

React components are the building blocks of a React application. They are reusable, self-contained pieces of code that encapsulate a specific part of the user interface (UI) and its behavior. In React, there are two main types of components: class-based components and functional components.

Here’s an overview of React components:

1. Class-Based Components:

• Class-based components are JavaScript classes that extend the React.Component class. They have a render() method that returns the component’s JSX (user interface) and can manage state and lifecycle methods.

   import React, { Component } from 'react';

   class MyComponent extends Component {
     render() {
       return <div>Hello from a class-based component!</div>;
     }
   }

2. Functional Components:

• Functional components are JavaScript functions that take props as an argument and return JSX. They are simpler, have no internal state, and have become the preferred way to define components in React, especially with the introduction of React hooks.

   import React from 'react';

   function MyComponent(props) {
     return <div>Hello from a functional component!</div>;
   }

3. Props:

• Components can receive data and configuration through props. Props are essentially read-only inputs for a component, allowing it to be customized when it is used in other parts of the application.

   <MyComponent text="Custom text" />

4. State:

• Class-based components can manage their own state using the this.state and this.setState() methods. State allows components to hold and manage data that can change over time, causing the component to re-render.

4. Lifecycle Methods:

• Class-based components have lifecycle methods (e.g., componentDidMount, componentDidUpdate, componentWillUnmount) that allow you to perform actions at different points in a component’s life cycle, such as after it’s mounted or updated.

4. Functional Components with Hooks:

• Functional components can manage state and perform side effects using React hooks, like useState, useEffect, and others. Hooks allow you to achieve the same functionality as class-based components while keeping your code more concise.

4. Component Composition:

• React components can be composed, which means you can nest and combine them to build complex user interfaces. This promotes code reusability and maintainability.

4. Rendering:

• You use the components by rendering them within other components or in the application’s entry point. The top-level component is typically called App.

   import React from 'react';
   import ReactDOM from 'react-dom';
   import MyComponent from './MyComponent';

   ReactDOM.render(<MyComponent />, document.getElementById('root'));

React components are at the core of React development, allowing you to create dynamic and interactive user interfaces by breaking down your UI into manageable and reusable parts. Depending on your project and personal preference, you can choose between class-based components or functional components with hooks to build your application.

React provides Components which behave like function but return HTML tags by render() function.

React provides two types of components one is Class types Component and another is function like component

React Class Component

React Class Component name must start with uppercase and it should extends React.Component making Class Component

Example

class Name extends React.Component {
  render() {
    return <h2>yashpal</h2>;
  }
}

Display name Component

ReactDOM.render(<Name />, document.getElementById('root'));

React function Component

function Name() {
  return <h2>yashpal</h2>;
}

Display function Component

ReactDOM.render(<Name />, document.getElementById('root'));

What is state in React Component

React state is object which holds the properties of Component

Example

class Name extends React.Component {
  constructor() {
    super();
    this.state = {name: "yash"};
  }
  render() {
    return <h2>my name is  {this.state.name} </h2>;
  }
}

Props in React

React Props is an another way of holding Component properties. Props is like functional based arguments which we send to the component in form of attributes

Example

class Name extends React.Component {
  render() {
    return <h2>my name is {this.props.name }</h2>;
  }
}

ReactDOM.render(<Name name="yash"/>, document.getElementById('root'));