Split code over many files

[Chris_Laurie]

Hi All - I’m a React newbie. My block code is getting unwieldy and I would like to split it into a few different files, starting with the settings ui.

I am unsure how to do this. In the settings.js file how does it look? Do I have a single function that returns a div with all the other stuff in it? Then how does the export line of the file look?

Then, in the index.js file, how does the import line look and how do I call this function that has my settings ui in it?

[kuovonne]

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';

[Kirill_Madorin]

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