Different Ways to Create Components in React

Published | 3 min read

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 keep this blog ad free.

ALSO ON ALEXHYETT.COM

Adding Inline Javascript to a React App

Adding Inline Javascript to a React App

  • 11 February 2022
Let me start this with a disclaimer, I am not a React expert and I am sure there are probably other ways to do this. If you know of a better way then please let me know in the comments! I have recently added Giscus to my blog which is a great way to ...
Privacy Focused Blog Services

Privacy Focused Blog Services

  • 28 January 2022
Towards the end of 2021, I started getting into web3 a lot more. Not only did I join the Developer DAO but I also launched my own NFT collection and wrote a few blog posts on the topic. One of the key components of web3 is the ownership of data. In w...
What is DeFi? Understanding Decentralized Finance

What is DeFi? Understanding Decentralized Finance

  • 19 November 2021
If you are new to the crypto space the concepts of decentralised finance can seem a bit overwhelming. There are so many new terms to try and understand, it can be challenging to see how everything fits together. I have been working in the traditional...
Using Hashnode as a Source for Gatsby

Using Hashnode as a Source for Gatsby

  • 05 November 2021
I have done quite a few website migrations over the years. My blog like many first started out on WordPress. After several attempts at optimisation, I ended up generating a static version of my WordPress website. On my static site generation journey...
What is Web3? The Decentralised Internet Explained

What is Web3? The Decentralised Internet Explained

  • 15 October 2021
If you have stumbled upon this article you have probably seen the term web3 being mentioned around the internet. Especially on Twitter at the moment it seems to be the latest buzzword. With all the hype around NFTs and crypto at the moment, a lot of ...
Ditch the Ads: The Future of Website Monetization

Ditch the Ads: The Future of Website Monetization

  • 08 October 2021
Do you remember that scene in Ready Player One, when IOI are showing what the future of the Oasis will look like once they take over? “We have determined that we’ll be able to fill 80% of the user’s display with advertising before inducing seizures”...
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 feel like a fraud. It turns out, I am not the only one that feels this way and they have a name for it, it is c...
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 be making calls to other systems or components. If you are lucky you are building against an existing API that ...

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: