> ## Documentation Index > Fetch the complete documentation index at: https://flatfileinc-feat-updatereactquickstart.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart > Create a new Space every time Flatfile is opened. For synchronous data import/exchange completed in one session, create a new Space each time Flatfile is opened. This suits situations where a clean slate for every interaction is preferred. ## Before you begin ## Prepare your React project ### Create your file structure Set up your app to look something like this: Setup your app to look something like this: ``` ├── public/ └── index.html ├── src/ └── blueprint.js └── index.jsx ├── package.json ``` In this file structure, your app should have two main directories, `public` and `src`. The `public` directory contains the `index.html` file, which is the entry point of the application's front-end. The `src` directory contains the main components and logic of the application, including the `blueprint.js` file, which defines the shape of your data, and `index.jsx` from which your application is run. The `package.json` file contains the dependencies and scripts for your application. ## Build your importer ### 1. Set up Flatfile Initialize Flatfile to open in a modal. Pass in your `publishableKey` from the Flatfile dashboard ([here's a link to the exact spot](https://platform.flatfile.com/dashboard/keys-and-secrets)) to the `FlatfileProvider` and a new Space will be created on each page load. Paste your key (it should look like `pk_123456`) where `undefined` is in the `index.jsx` file for the `const PUBLISHABLE_KEY` and you'll be in good shape. Here are all the files you need to get started, we'll make edits to these in the next steps. ```jsx src/index.jsx import ReactDOM from "react-dom/client"; import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react"; import { blueprint } from "./blueprint"; // We need to get this from the Flatfile dashboard https://platform.flatfile.com const PUBLISHABLE_KEY = undefined; const FlatfilePortal = () => { const { openPortal } = useFlatfile(); return ( <> ); }; const App = () => ( ); const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` ```js src/blueprint.js export const blueprint = { name: "Contacts", slug: "contacts", fields: [ { key: "firstName", type: "string", label: "First Name", }, { key: "lastName", type: "string", label: "Last Name", }, { key: "email", type: "string", label: "Email", }, ], }; ``` ```html public/index.html

``` ```json package.json { "name": "example-flatfile-react-app", "version": "1.0.0", "private": true, "dependencies": { "@flatfile/react": "^7.9.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "browserslist": { "production": [">0.2%", "not dead", "not op_mini all"], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ``` ### 2. Build and run your React app Build your React project and start the development server: ``` npm install npm start ``` Your browser should automatically open, displaying the Flatfile importer on page load. ### 3. Build on the Workbook Blueprint Now, let's build a Workbook inside the Space for next time. 1. Update your `blueprint.js` with this simple Blueprint. 2. Update `index.html` to import the Workbook. When you opened Flatfile, you'll see a Workbook called "Contacts" that has one Sheet with three fields. You can modify that however you like according to our [Blueprint outlined here](/blueprint/overview), but as a simple example, we added one more field here for the Contacts' Favorite Color. ```js src/blueprint.js export const blueprint = { "name": "Contacts", "slug": "contacts", "fields": [ { "key": "firstName", "type": "string", "label": "First Name" }, { "key": "lastName", "type": "string", "label": "Last Name" }, { "key": "email", "type": "string", "label": "Email" }, { "key": "favorite-color", "type": "string", "label": "Favorite Color" } ] } ``` ### 4. Export your data with an `onSubmit()` action. Finally, let's get the data out of our system and to your destination with `onSubmit`. Once you add this code, when the submit button is clicked, this will be the place you can egress your data. Learn more about [Egress Out](/guides/egress). Once you have your data, you can do whatever you want with it - from this step you can make another API call to send it where you want. Keep in mind, this is just a simple example. You can do much more with your data and Flatfile! We paginate the data in this call so if you have more than 10,000 records worth of data you'll need to handle that. We have lots of ideas on how to handle that, if you'd like to learn more. ```jsx src/index.jsx import ReactDOM from "react-dom/client"; import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react"; import { blueprint } from "./blueprint"; const PUBLISHABLE_KEY = undefined; const FlatfilePortal = () => { const { openPortal } = useFlatfile(); return ( <> { const data = await sheet.allData(); console.log("onSubmit", data); }} /> ); }; const App = () => ( ); const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` ### 5. Transform Data with an `onRecordHook` Next, we'll listen for data changes and respond `onRecordHook`, Once you add this code, when a change occurs, we'll log the entered first name and update the last name to "Rock." You'll immediately see this begin to work when you add or update any records. Learn more about [Handling Data](/guides/handling-data) ```jsx src/index.jsx import ReactDOM from "react-dom/client"; import { useFlatfile, FlatfileProvider, Sheet } from "@flatfile/react"; import { blueprint } from "./blueprint"; const PUBLISHABLE_KEY = undefined; const FlatfilePortal = () => { const { openPortal } = useFlatfile(); return ( <> { const data = await sheet.allData(); console.log("onSubmit", data); }} onRecordHook={(record) => { record.set("lastName", "Rock"); // If you added a favorite-color field, you can use it here. // record.set("favorite-color", "blue"); return record; }} /> ); }; const App = () => ( ); const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` ### 6. Match your brand By attaching a `theme`, we will now override colors in your Space to match your brand. See all of the options here in the [Theming Reference](/guides/theming). The `Space` component can take a number of options to configure and style the component in the Portal instance. In this case, we're adding `theme` to the `metadata` object and giving the Space a `namespace` of `portal`. ```jsx src/index.jsx import ReactDOM from "react-dom/client"; import { useFlatfile, FlatfileProvider, Sheet, Space } from "@flatfile/react"; import { blueprint } from "./blueprint"; const PUBLISHABLE_KEY = undefined; const FlatfilePortal = () => { const { openPortal } = useFlatfile(); return ( { const data = await sheet.allData(); console.log("onSubmit", data); }} onRecordHook={(record) => { record.set("lastName", "Rock"); return record; }} /> ); }; const App = () => ( ); const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` ### 7. Customize Continue to customize your importer as needed. For more options, [view the full React integration reference](../reference/advanced). ## Example Explore our React example project for further guidance. Clone the simplified Flatfile React tutorial from here.