My First React App » Refactor Your First Feature

My First React App » Refactor Your First Feature

Refactor Your First Feature

The code from the previous tutorial works just fine, but it mixes up Manifest responsibilities with rendering ones.

👉 IT'S NOT GOOD TO MIX UP DIFFERENT RESPONSIBILITIES 👈

In this tutorial we will refactor the code we wrote so to implement SRP almost religiously.

The CustomRoot Component

The core business of this first feature of ours is to hook into the react-root Service and provide a custom component to render.

Such component will use some MUI components render something real useful.

Let's start by creating this React Component in /src/custom-root/CustomRoot.js:

// MUI Components:
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';

// MUI Icons:
import StarIcon from '@mui/icons-material/Star';

// My Component:
export const CustomRoot = () => (
  <Box>
    <AppBar position="static">
      <Toolbar>
        <StarIcon />
        <Typography>CustomComponent</Typography>
      </Toolbar>
    </AppBar>
    <Typography>My First React App with MaterialUI</Typography>
    <Link href="https://mui.com" color="primary" variant="body2">
      Open MUI Documentation
    </Link>
  </Box>
);

This is technically a dumb component. The most important thing to notice, for the sake of understanding ForrestJS properly, is that this component has nothing to do with ForrestJS.

It's just pure React code.

The Feature Manifest

As we saw quite clearly in the My First REST API Tutorial, a ForrestJS Feature consist in a Manifest file that explains how to integrate custom business logic with the rest of the application.

So let's build our /src/custom-component/index.js Manifest and tell ForrestJS to use our CustomComponent in the ReactRoot Service:

// Import the custom logic written in React
import { CustomRoot } from './CustomRoot';

// Explain how to integrate our custom logic
// with the rest of the App:
export default {
  target: '$REACT_ROOT_COMPONENT',
  handler: { component: CustomRoot },
};

The App Manifest

Now that our Feature is complete it is time to refactor the App's manifest /src/index.js so to use it:

// Import Libraries:
import forrest from '@forrestjs/core';

// Import Services:
import reactRoot from '@forrestjs/react-root';
import reactMUI from '@forrestjs/react-mui';

// Import Features:
import customRoot from './custom-root';

forrest
  .run({
    services: [reactRoot, reactMUI],
    features: [customRoot],
  })
  .catch((err) => console.error(`Boot: ${err.message}`));

Here is the full source code that you can run, fork, and play with: