Different Ways to Create Components in React

By Alex Hyett on in Software Development

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 to 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.


Was this post useful?
If you found this post useful and would like to support me, you can do so by buying me a coffee. Donations help support the running of this blog.

ALSO ON ALEXHYETT.COM

Dealing with Imposter Syndrome as a Software Developer

Dealing with Imposter Syndrome as a Software Developer

  • 28 May 2021
I have been a professional software developer for over a decade and I have been writing code for over 25 years. However, sometimes I still…
Using WireMock.net for Integration Testing

Using WireMock.net for Integration Testing

  • 21 May 2021
Last week I showed you how you can use Wiremock in a docker container to mock API calls that your application uses. This week is on a…
Mocking API calls using WireMock

Mocking API calls using WireMock

  • 14 May 2021
It is rare in software development that you are building something in complete isolation from everything else. Generally, you are going to…
Using ngrok to test local websites and APIs

Using ngrok to test local websites and APIs

  • 07 May 2021
Often when I am creating a new website, I want to see how it is going to look on an actual device like my phone or tablet. You can use…
Using GitHub Actions to Deploy to S3

Using GitHub Actions to Deploy to S3

  • 26 March 2021
Recently I went through the process of setting up Drone CI on my Raspberry Pi. The plan was to use my Raspberry Pi as a build server for…
Getting Started with AWS Step Functions

Getting Started with AWS Step Functions

  • 12 March 2021
I have recently been looking into AWS Step Functions. For those not familiar with them, Step Functions are Amazon’s way of providing a state…
Useful Docker Commands Worth Saving

Useful Docker Commands Worth Saving

  • 12 February 2021
I use docker every day. All the applications I write at work or at home end up in docker containers. Most of the time though, I am only…
Grafana Monitoring on a Raspberry Pi

Grafana Monitoring on a Raspberry Pi

  • 28 January 2021
As you might have seen from my last few posts I have quite a lot running on my Raspberry Pi. I am currently using a Raspberry Pi 2 B which…

Alex Hyett
WRITTEN BY

Alex Hyett

Software Developer, Entrepreneur, Father, and Husband. Engineering Lead at Checkout.com.

Want to get in touch? You can find me here:


Join the Newsletter

Subscribe to get my latest content by email.

    I won't send you spam. Unsubscribe at any time.