React and Tailwind CSS to Wix Studio

Ask the community
, , , ,
1

Question:
How can I migrate my existing web page built with React and Tailwind CSS to Wix Studio without recreating the pages from scratch?

Product:
Wix Studio Editor.

What are you trying to achieve:
I have a web page developed using React and Tailwind CSS. I want to move this web page to Wix Studio and avoid recreating those pages from scratch. I’m looking for the best possible way to use the already developed React code within Wix Studio.

What have you already tried:

  • I have reviewed the Wix Studio documentation but couldn’t find specific instructions on importing React and Tailwind projects.
  • I have searched through forums and tutorials but haven’t found a clear solution.

Additional information:

  • The current project includes a variety of custom components and styles that would be time-consuming to recreate manually in Wix Studio.
  • I am open to any alternative solutions or best practices that can help streamline this migration process.
2

I think you will have only 2 possibilities.

  1. Either recreating everything from scratch using the Wix-Elements and tools.

  2. Using CUSTOM-ELEMENTS, where you can create what ever you want.
    That means adding your existing code into a CUSTOM-ELEMENT, editing and optimizing it a little bit to get a perfect result.

In your code you are using → JS+HTML+CSS??? → CUSTOM-ELEMENTS are able to handle all of them.

3

can I use react and tailwind css in custom element ?

4

Are you able to use the code in JS-Fiddle?
If so → then you are able to use the code in a CUSTOM-ELEMENT aswell (with some minor modifications).

I can’t see your code.

5

My code is just have react and tailwind css , and commonly use react library , here is the snippet

import Button from "../../common/Button";
import Container from "../../common/Container";
import Select from "react-select";
import { Link } from "react-router-dom";
import { Typography } from "../../common/Typography";
import { useEffect, useState } from "react";
import { GiSettingsKnobs } from "react-icons/gi";
import { CiSearch } from "react-icons/ci";
import ListComponent from "../../common/ListComponent";

can we push this to wix studio

6

Seems to be more complex, but possible.

I think you will need to do some more optimizations/implementations and conversions. There are several ways of how to achieve it → (CDN-imports / installing NPM-packages …)

  1. Installing babel → for JSX usage
    https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js
  2. Installing react-to-webcomponent → to be able to integrate react-code.
    https://unpkg.com/react-to-webcomponent
  3. Using the new created Webcomponent inside your Wix-Page.

You can try to use the NPM-PACKAGE → react-to-webcomponent - npm.

This is a very simple example, of how to implement a REACT-BASED-CODE into a JS-FIDDLE runtime-environment…

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React in JSFiddle</title>
  <!-- Include React and ReactDOM from CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <!-- Include Babel for JSX compilation -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <!-- JavaScript (Babel + JSX) -->
  <script type="text/babel">
    // Define a simple React component
    const App = () => {
      return (
        <div>
          <h1>Hello, React in JSFiddle!</h1>
          <p>This is a simple React component.</p>
        </div>
      );
    };

    // Render the component to the root element
    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>

Copy&Paste it into JS-Fiddle and see what has been done to make it work.

Once you have understood what to do, you can start to optimize your own react-project and converst it into a CUSTOM-ELEMENT / CUSTOM-COMPONENT.

7

can you help me with any documentation or blog regarding this

8

I would recommend → GPT. It is for sure not the best helper, but it will show you the right directions. You will have to solve your issue step by step.

At least your aim will be to be able to use your REACT-SETUP inside of JS-FIDDLE.

Once your code runs in js Fiddle → this will make sure that your code also will run inside a WIX-HTML-COMPONENT.

And then you can UPGRADE your solution and implement it into a Wix-CUSTOM-ELEMENT → which will provide you even some more possibilities.

Wix-Custom-Element → is the better → Wix-HTML-Component.

INFORMATION ABOUT HTML-COMPONENT:
https://dev.wix.com/docs/velo/api-reference/$w/html-component/introduction