Split code over many files

Topic Labels: Custom Extensions
1164 2
Showing results for 
Search instead for 
Did you mean: 
5 - Automation Enthusiast
5 - Automation Enthusiast

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?

2 Replies 2

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';
5 - Automation Enthusiast
5 - Automation Enthusiast

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