Learn ReactJS Components

Key Takeaways

• React components are essential for building reusable UI elements.
• Components can be created as classes or functions, each serving different purposes in React apps.
• props are used to pass data to components, allowing for dynamic UI rendering.

What is a React Component?

In React, a component is a JavaScript function or class that optionally accepts inputs (known as props) and returns a React element that describes how a section of the UI should appear.

Class components are defined using ES6 classes and must include a render() method, which returns the UI elements:

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        Hello React!
      </div>
    );
  }
}

export default App;

This example shows an App component. It extends React.Component and includes a render() method returning JSX.

Class Components and props

Class components can accept props, allowing them to be dynamic and reusable. In React, props are accessed using this.props:

import React from 'react';

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

class App extends React.Component {
  render() {
    return (
      <div>
        <Header name="Sam" />
      </div>
    );
  }
}

export default App;

Here, App includes a Header component, passing the name prop to dynamically render content.

React Component Examples

Sub Component Example

React components can be composed of other components, creating a tree structure:

import React from 'react';

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

class Message extends React.Component {
  render(){
    return (
      <div>
        <p>You have {this.props.count} new messages!</p>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Header name="Sam" />
        <Message count={5} />
      </div>
    );
  }
}

export default App;

This demonstrates how React apps typically have a root component like App that organizes various sub-components.

Functional Component Example

Functional components offer a concise syntax for rendering, especially when lifecycle methods aren't necessary:

import React from 'react';

const Header = (props) => {
  return (
    <h1>Welcome back, {props.name}</h1>
  );
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Header name="Sam" />
      </div>
    );
  }
}

export default App;

With functional components, there’s no need for the render method. Instead, they return JSX directly and accept props as a parameter.

Conclusion

Components are foundational to React applications, offering reusability and modularity. Understanding how to use both class and functional components, along with props, equips you to build efficient and scalable UIs in React.

FAQ

Why use functional components?

Functional components are often preferred for their simplicity and performance benefits, especially when components only need to render without managing state or lifecycle methods.

What are props?

props are arguments passed into React components. They allow data and callback functions to be passed to child components, enabling dynamic UI updates.

How do components re-render?

Components automatically re-render when their state or props change. React follows a declarative paradigm, efficiently managing updates through its virtual DOM.