Functional React Components

The fundamental aspect of React that makes it such a viable way to construct an application is through it’s use of components. The way that React uses a virtual DOM is what makes it such a fast and constantly updating tool. Components are a great way to separate and control smaller parts of an application that all add up to the totality of it. Slightly akin to the way that one would use partials in a Ruby on Rails application, components are an independent way to write elements of an application that you intend on reusing.

Components themselves can be broken up into two main divisions. Class components and Functional components are the backbone of a typical React application. The Class component is traditionally considered a bit more capable with more features, but today we will be looking into and discussing Functional Components in React. In modern React, it is typically recommended that the Functional Component be used. A Functional component is essentially an ES6 function that returns JSX. JSX is a syntax extension for JavaScript.

The code snippet above is a react functional component. Line 3 lets us know that the component itself is being exported. To import the component in our App.js file we would have to include the line “import Testing from ‘./components/Testing” before our “function” line on the file page and in our return we would have to call the component to be rendered with the line “<Testing />”.

Functional components are a great way to write independent reusable code in React. The Functional Component is a Javascript/ES6 function that must return JSX. The typical naming convention says that we name our file starting with a capital letter. We will talk more about using props and hooks with functional components in the future and it will all tie in together and make a lot more sense.