Different Ways to Create Components in React

As they say, there is more than one way to skin a cat. As it happens there is also more than one way to create a React component, which is much more animal friendly!

I keep coming back to React for my projects, especially now I am using Gatsby for my blog. When I do I have to try and remember all the different ways you can create components in react.

Hopefully, this page will help as a reference for you for the different ways to create a React component.

Functional components

The simplest way to create a component in React is with a simple function.

function Label() {
  return <div>Super Helpful Label</div>
}

Of course with the wonders of ES6, we can just write this as an arrow function.

const Label = () => <div>Super Helpful Label</div>

These are used like this:

const Label = () => <div>Super Helpful Label</div>

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Label />
      </div>
    )
  }
}

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

Adding properties to functional components

You can also add properties to these simple components as well. After all, they are just javascript functions:

const Label = props => <div>Super {props.title} Helpful Label</div>

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Label title="Duper" />
      </div>
    )
  }
}

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

With functions, you can also destructure the properties in the function signature, save you having to write props over and over again.

const Label = ({ title }) => <div>Super {title} Helpful Label</div>

Class components

As we did with the App above we can also create components as classes as well. If you want your component to have local state then you need to have a class component.

There are also other advantages to classes such as being to use lifecycle hooks and event handlers.

class Label extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <div>Super {this.props.title} Helpful Label</div>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Label title="Duper" />
      </div>
    )
  }
}

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

Adding Children into React Components

In many cases, you are going to want to nest components. We can do this using children in React. This is done with the special children property.

class Label extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <div>{this.props.children}</div>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Label>Super Duper Helpful Label</Label>
      </div>
    )
  }
}

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

Final Thoughts

Hopefully, this page will be a useful go-to for you when you come to create your next React project. If you found this useful please share it.

There are also many ways to style react components as well, you can learn more in my next post.

Originally published at https://www.alexhyett.com on November 10, 2020.