React basic 3 — Reusable Functional Components

The most important gist in React is its component-based framework. Now with the basic understanding with JSX from the previous post (React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML), it's important to understand how we can organize reusable components to minimize codes that we have to write.

There are two fundamental component types available in React: functional and class-based. Although class-based components can handle more complex logics, functional components are more straightforward and easier to implement.

Create a basic functional component

Step 1. Create a new component js file

From the JSX in index.js, select a portion of your UI that could be a component. Create another js file with a name that describes its purpose to your application (the common naming convention is a pascal case like UserInterfaceComponent.js).

Step 2. Fill the component file with JSX and export method

In order for index.js file to render this component, we need to add a syntax export default [ComponentName] at the end of the file. Below diagram shows how relationships between parent-and-child files look like. The component with an export…