Summary

In this post, we will learn in detail about components, which are the main building blocks of React.js.

Category

React.js

React interview

React component

Cover

Slug

what-is-react-component

Date

‣

author

Published

Published

Main Elements of React Components

1. Component Definition:
• Functional Component: Defined as a function and created using function or an arrow function. For example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

1. Props:
• Used to pass data to components from the outside. With props, dynamic values can be given to components.
• Example:

<Welcome name="Sara" />

1. State:
• Used to store the internal state of a component. State allows for changes within the component.
• Example:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

1. Lifecycle Methods:
• Methods related to the component's lifecycle, used during creation, updating, and removal of components. Available in class components, for example: componentDidMount, componentDidUpdate, componentWillUnmount.

2. Rendering:
• Specifies how the component is displayed on the screen. In class components, rendering is done through the render method, or through the return statement in functional components.
• Example:

function MyComponent() {
  return <div>Content here</div>;
}

1. JSX (JavaScript XML):
• A syntax similar to HTML used in React components, which allows writing HTML-like code within JavaScript.
• Example:

const element = <h1>Hello, world!</h1>;

1. Event Handling:
• Components respond to user actions (such as button clicks). Event handlers are added through attributes like onClick, onChange.
• Example:

function handleClick() {
  alert('Button clicked!');
}

function Button() {
  return <button onClick={handleClick}>Click Me</button>;
}

Conclusion