- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jun 28, 2020 12:40 AM
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?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jun 29, 2020 01:43 AM
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';
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎Jun 29, 2020 03:09 AM
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