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.

ALSO ON ALEXHYETT.COM

Stack vs Heap Memory - What are the differences?

Stack vs Heap Memory - What are the differences?

  • 30 November 2022
In modern programming languages such as C# or Java, we tend to take memory management for granted. Gone are the days when we need to call malloc to request enough memory for our variables. Luckily a lot of that is done for us by the runtimes so we do...
Code Katas: Can They Make You A Better Developer?

Code Katas: Can They Make You A Better Developer?

  • 21 November 2022
They say “practice makes perfect”, although I much prefer “practice makes improvement”. Either way, how do you practice being a programmer? If you are already working as a software developer then you will be getting some practice from working on larg...
Git Flow vs GitHub Flow

Git Flow vs GitHub Flow

  • 10 November 2022
Losing code that you have spent hours writing can be painful, which is why we use version control (or source control) to store our code and manage changes. Version control is even more important if you are working in a team, without it code, changes ...
I Posted on YouTube Consistently for 1 Month. This is What Happened!

I Posted on YouTube Consistently for 1 Month. This is What Happened!

  • 02 November 2022
As part of my creative sabbatical, I have been posting a new software development video on my YouTube channel every Monday and Friday. It takes a long time to grow on YouTube, and I knew this going in but I have been pleasantly surprised with my grow...
Bitwise Operators and WHY we use them

Bitwise Operators and WHY we use them

  • 26 October 2022
Bitwise operators are one of those concepts that a lot of programmers don’t understand. These are not used a great deal anymore so you can get away with not knowing them but they can still come in handy for a number of different scenarios. If you end...
8 Data Structures you NEED to Know

8 Data Structures you NEED to Know

  • 26 October 2022
You can get pretty far in programming without understanding Data Structures, but eventually, you are going to need to know them, understand how they work and when to use them. https://www.youtube.com/watch?v=SCkbQSPH--A What is a data structure? A da...
Binary Numbers Explained for Programmers

Binary Numbers Explained for Programmers

  • 21 October 2022
Everyone knows that computers run on ones and zeros. This is because CPUs are made up of billions of transistors, which are basically just on-off switches. Any code you write needs to be processed by a computer and therefore has to be converted to b...
Beginners Guide to Programming

Beginners Guide to Programming

  • 12 October 2022
A lot of my articles are aimed at intermediate to advanced developers, but as part of my creative sabbatical, I am working on creating content for those just starting out. So in this post I will be covering some of the many questions that beginner pr...