Split code over many files

I recommend going though a React tutorial and a JavaScript tutorial to get a better understanding of how they work together. Note that splitting code into multiple files with imports & exports is a JavaScript feature, and not a React feature.

I like to split each React component into its own file, so each file usually has only one function in it. Sometimes the component has only a single return, other times it might have multiple returns for different situations.

For example, I have a file for the component App in the file app.js in the frontend directory.

import {useBase} from '@airtable/blocks/ui';
import React from 'react';

function App() {
  // insert content here
}

export default App;

Then at the top of my index.js file, I import that file along with the other files:

import App from './app';

You can see how to do it in examples Airtable Blocks SDK
Name quiz block, for example apps-name-quiz/frontend at master · Airtable/apps-name-quiz · GitHub

The main idea of code splitting is that you can define each React component (function) in a separate file export it and import in another file then