Codejet
Search
⌃K
Comment on page

Handling Exported React Code

In this article, we will discuss two approaches for handling exported code from Codejet. You have the option to either:
  1. 1.
    Use our boilerplate.
  2. 2.
    Start a fresh project using Vite or CRA (Create React App).

In the case of using boilerplate you can:

Option 1: Manual transfer of files to the boilerplate

Follow the steps below to manually transfer the files to your project or boilerplate:
  1. 1.
    Unpack the "Codejet_generated_code.zip" file.
  2. 2.
    Move the contents of the "Codejet_generated_code" directory (which includes the "components" and "pages" directories) to the "src" directory in your project or boilerplate.
  3. 3.
    Import { FRAME } from pages/FRAME_0/index.tsx in your App.jsx file.
  4. 4.
    Use the <FRAME /> component in your code.
  5. 5.
    Finally, start your project by running either npm run start or npm run dev.

Option 2: Using our helper to transfer files from e.i. "Download" folder to boilerplate project

To simplify the process, you can follow these steps to utilize our helper script:
  1. 1.
    Install fswatch on your system. Use one of the following commands based on your operating system:
    • MacOS: brew install fswatch
    • Linux: sudo apt-get install fswatch
    • Windows: choco install fswatch
  2. 2.
    Open the start.sh file and edit the path to your "Downloads" folder.
  3. 3.
    Source the script file using the command: source start.sh.
  4. 4.
    Before running the script for the first time, make sure to remove any files called "Codejet" from your "Downloads" folder.
  5. 5.
    Run the script by executing syncWithDownloads.
  6. 6.
    Every time you save the "Codejet.zip" file in your "Downloads" folder, it will be automatically moved and unzipped to the "src" folder. By following either of these approaches, you can effectively handle the exported code from Codejet and incorporate it into your project. Choose the method that best suits your requirements and development workflow. Note: Ensure that you have the necessary dependencies and configurations set up in your project before proceeding with the above steps.

In the case of starting a fresh project:

We recommend following the behavior of Option 1: Manual transfer of files to the boilerplate from the boilerplate example. Codejet-generated components are very simply built and you are sure to get the hang of it.
Frameworks - Previous
React
Next - Frameworks
HTML
Last modified 3mo ago