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

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).

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 statement can be imported by its parent file with an import statement.

Below is what the component file may look like with the export statement.

import React from ‘react’;const ListView = () => {   return (      <li>
Here is the list content.
</li>
);};export default ListView;

In the parent file, index.js in this case, you have to import the external ListView component at the top. In order to render it, you need to use the syntax such as <ListView />, which its name depends on your import statement.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ListView from ‘./ListView’;
const App = () => { return ( <div className = “container”> <ListView /> </div> );};ReactDOM.render(<App />, document.querySelector(‘#root’));

Make the component reusable and pass data

Props in functional components are like arguments that can be passed to a regular JS function. In order to send data, Props can be added just like other attributes on JSX tags.

<ListView content="Hello!" time="today"/>
<ListView content="Good bye" time="last year" />

Components can receive props as arguments. Each property can be accessed by its name like in the example below.

import React from ‘react’;const ListView = props => {   return (      <li>
Message was {props.content} from {props.time}
</li>
);};export default ListView;

If the ListView component is a generic component that should be used for other applications to display messages, it's better not to hard-code "Message was ...". Instead, the content should be another component that gets loaded inside the generic ListView component. This way, ListView component can be used for other applications with different messages.

MessageContent.js

import React from ‘react’;const MessageContent = props => {   return (      <div>
Message was {props.content} from {props.time}
</div>
);};export default MessageContent;

ListView.js

import React from ‘react’;const ListView = props => {   return (      <li className = “ui container”>
{props.children}
</li>
);};export default ListView;

index.js

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ListView from ‘./ListView’;
import MessageContent from ‘MessageContent’;
const App = () => { return ( <div className = “container”> <ListView>
<MessageContent content="Hello!" time="today"/>
</ListView>
<ListView>
<MessageContent content="Good Bye" time="last year"/>
</ListView>
<ListView>
<div>This is a custom message</div>
</ListView>
</div> );};ReactDOM.render(<App />, document.querySelector(‘#root’));

Prepare default props values

While props allows us to be flexible how we use components, you may want to set a default value to each. For example, "Are you sure" could be set as a default alert message for this component. In this way, when you forgot to set prop attributes or don't need a custom message, this default message will be shown instead. The default value can be declared using .defaultProps = {} .

import React from ‘react’;const AlertPopup = props => {   return (      <div className = “ui container”>
{props.message}
</div>
);};AlertPopup.defaultProps = {
message: 'Are you sure?'
};
export default AlertPopup;

Table of Content

React basic 1 — “Hello React World”. Setting Up Your First React App

React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML

React basic 3 — Reusable Functional Components

React basic 4 — Class Based Component and Lifecycle Methods

React basic 5 — Basic Event Handlers

React basic 6 — Use Axios Library to Fetch Data

React basic 7 — Render a List based on the API response

React basic 8 — Build React App and Host it on Server

Reference

Modern React with Redux by Stephen Grider | Udemy

Create a New React App | React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store