6 ways to write a React component (TS Included)

Hello everyone, my name is Mateo and like many of you, I have set some goals now that a new year has begun. Sharing, documenting, and applying my knowledge are some of them so I have decided to open this space called Coding with Mateo.

The first post I will write is a compilation of different ways you can write a React component. Additionally, I will leave its version in Typescript in case it is useful to clarify how to annotate the functions in its different presentations, let's start.

React has gradually become the paradigm/technology we think of when it comes to frontend development. Watch some videos, buy some Udemy courses, make your first task list, finally master the main concepts. However, the diversity of syntax provided by Javascript makes that at some point we don't understand why some people write components one way and others another way.

It is important to remember that:

• A React component is a function that thanks to the composition can contain internal functions, including new components.

• Javascript functions are objects with the difference that they can be executed through parentheses.

• Even if you are still maintaining/writing class components, those components are interpreted, transposed, and executed as ES5 functions since those classes are only syntactic sugar of recent EcmaScript features.

Whether you are working on a project by yourself or in a team, defining a syntax to declare your utility functions and React components can help to simplify the fatigue caused by the rapid growth of the project structure.

Below, I show you different ways to write a React component using a button as an example.

1.Using a regular function.

   // Button.jsx
   function Button (props) {
      return <button>{props.children}</button>
   }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   function Button (props: ButtonProps) {
      return <button>{props.children}</button>
   }

2.Using a function expression.

   // Button.jsx
   const Button = function (props) {
      return <button>{props.children}</button>
   }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   const Button = function (props: ButtonProps) {
      return <button>{props.children}</button>
   }

3.Using an arrow function with const.

   // Button.jsx
   const Button = (props) => {
      return <button>{props.children}</button>
   }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   const Button = (props: ButtonProps) => {
      return <button>{props.children}</button>
   }

4.Using an arrow function with let.

   // Button.jsx
   let Button = (props) => {
       return <button>{props.children}</button>
   }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   let Button = (props: ButtonProps) => {
       return <button>{props.children}</button>
   }

5.Using an explicit return

   // Button.jsx
   let Button = (props) => <button>{props.children}</button>
   // or
   const Button = (props) => <button>{props.children}</button>

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   let Button = (props: ButtonProps) => <button>{props.children}</button>

6.Using a class.

    // Button.jsx
    class Button extends React.Component {
      render () {
         return <button>{this.props.children}</button>
      }  
    }

   // Button.tsx
   type ButtonProps = {
      children: React.ReactNode;
   };

   class Button extends React.Component<ButtonProps> {
      render() {
         return <button>{this.props.children}</button>;
      }
   }

Finally, I must say that, all the ways of writing them work well. There is no one better than another, feel free to use the one you like best.

However, I would like to clarify that:

• The class components are being progressively deprecated.

• Declaring components with a let can be useful when performing conditional rendering based on the props of a parent component.

   function ThisOrThat (props) {
      /* 
        Maybe some difficult logic.     
        Of course, that code does not smell good, however, it's 
        important to know that's possible to do this.
      */
      let renderedComponent = getComplexComponent(props); // 
      if (!renderedComponent) {
         renderedComponent = <FallbackComponent />
      }
      return <section>{renderedComponent}</section>
   }

I would love to know your opinion and what topics you would like to see in my blog posts. Also if you can react to this blog that would make me very happy.

Thank you very much and happy new year 🎉🥳