Alternative Function Syntax in React

Back to: ReactJS Tutorials

Alternative Function Syntax in React:

In this article, we want to show you an alternative syntax for writing functions, any kind of function in JavaScript. A syntax that is not exclusive to React, but which can be used in any modern JavaScript application. Instead of writing a function with the function keyword, we can also write a so-called arrow function. You can find more details about this arrow function on the Internet. It’s not a React-specific thing.

To use the arrow function syntax. We have to replace function with const to create a new constant with a name, and then the value which we want to assign to this constant is an arrow function which can be written like this,

const App = () => {…}

We can have a list of parameters inside the ‘()’ brackets, then an equal sign and a greater sign forming such an arrow, and then the function body between curly braces.

This is just standard JavaScript code. You can absolutely stick to the function keyword. This is just a syntax we prefer because it’s a bit shorter. And therefore we will migrate all my functions to this syntax. But you don’t have to do that if you prefer the other syntax, it’s really 100% optional. It doesn’t offer any benefits or anything like that. It’s just personal preference.

We want to show this syntax because you should be aware of it that you can write your functions like this. Any functions, not just component functions.

And with that, we’re done with this module. It was a huge module. And yet we’re still only scratching the surface. There’s way more to explore about React. And the next thing we will explore is how we can make this a bit more interactive and reactive because currently, it’s all static. This data never changes. As a user, we can’t do anything about it. And we are building modern user interfaces with React because we typically want to build user interfaces where things can change.

Therefore, in the next section, we are going to dive into another important React concept, state because that will help us make our applications interactive.