# Integrating code from builder app into React

**URL:** <https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082>\
**Category:** General\
**Created:** [January 3, 2025, 5:00pm UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082 "2025-01-03T17:00:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikey4281](https://avatars.discourse-cdn.com/v4/letter/m/dbc845/32.png) [@mikey4281](https://forum.builder.io/u/mikey4281)\
**Post date:** [January 3, 2025, 5:00pm UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082/1 "2025-01-03T17:00:43Z")

</div>

I generated some code from the [Builder.io](http://Builder.io) Figma plugin and I want to integrate it into a React app, but getting red in visual code ide.  
Do i need to install something in the react workspace to prep for the integration into a React app.

 ![classname](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/7f5052ae3b7dcdce45cd930c5f81f3a4c90cf4ce.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 6, 2025, 11:16am UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082/2 "2025-01-06T11:16:33Z")

</div>

Hello @mikey4281,

If you’re using ESLint or TypeScript, there may be a rule or configuration that flags `className` as problematic.

You may want to check your linting configuration (e.g., `.eslintrc.js` or `tsconfig.json`) to ensure there are no conflicting rules.

And for TypeScript projects, ensure your `tsconfig.json` includes JSX support:

```auto
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

```

I hope this helps! Let us know if the issue still persists.

Thanks,

---

<div class="post-metadata">

**Author:** ![mikey4281](https://avatars.discourse-cdn.com/v4/letter/m/dbc845/32.png) [@mikey4281](https://forum.builder.io/u/mikey4281)\
**Post date:** [January 6, 2025, 5:44pm UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082/3 "2025-01-06T17:44:02Z")

</div>

Thank you and will try this .

---

<div class="post-metadata">

**Author:** ![mikey4281](https://avatars.discourse-cdn.com/v4/letter/m/dbc845/32.png) [@mikey4281](https://forum.builder.io/u/mikey4281)\
**Post date:** [January 6, 2025, 5:50pm UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082/4 "2025-01-06T17:50:16Z")

</div>

Hi,

I modified the tsconfig.json and it’s still giving me red. I also cleaned the cache and verified it.

{  
“extends”: “expo/tsconfig.base”,  
“compilerOptions”: {  
“moduleResolution”: “bundler”,  
“strict”: true,  
“jsx”: “react-jsx”  
}  
}

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 7, 2025, 9:55am UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082/5 "2025-01-07T09:55:51Z")

</div>

Hi @mikey4281,

Could you please provide more details about the error you’re encountering when hovering over the ‘className’ string? Any additional information, such as error messages or behavior you’re seeing, would be helpful in troubleshooting the issue.

Looking forward to your response!

Best regards,

---

<div class="post-metadata">

**Author:** ![mikey4281](https://avatars.discourse-cdn.com/v4/letter/m/dbc845/32.png) [@mikey4281](https://forum.builder.io/u/mikey4281)\
**Post date:** [January 7, 2025, 8:53pm UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082/6 "2025-01-07T20:53:26Z")

</div>

Hi,

I was not able to upload the screenshots so I’m sending it via email.

> **(attachments)**
>
> ![cardsection.png](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/dcf2426468d0355bf3596601248b00f850180c79.png)  
> ![builderIoConsole.png](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/08095d0faf98c3df0c5481fbeee5fb8f87df4df0.png)  
> ![builderUploaderror.png](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/57f104caba1dc2ca8b5798c557e6f9163953e6bb.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 8, 2025, 6:22am UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082/7 "2025-01-08T06:22:14Z")

</div>

Hello @mikey4281,

Thanks for sharing the screenshot. Unfortunately, it doesn’t provide enough context to diagnose the issue. There’s no error showing in the console, and I suspect the warning you’re seeing may not be directly related to the `className` issue you mentioned earlier.

If possible, could you share a minimal, reproducible git repo of your app? This would help us better understand the issue and provide a more accurate solution.

Thanks again,

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 10, 2025, 4:56pm UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082/9 "2025-01-10T16:56:00Z")

</div>

Hello @mikey4281,

I noticed that your configuration uses Expo, which means this is a React Native project. React and React Native code-gen output are not interchangeable.

React Native styling is usually applied with StyleSheet, typically applied using the `style` prop, which accepts either a single style object or an array of style objects. I’ve included an example below to demonstrate.

I also observed that the default style output for React Native codegen is “Tailwind”, which outputs className props on the React Native code output. This may require additional setup in your project to configure [Nativewind](https://www.nativewind.dev/), which will allow for using the className prop, not normally supported in React Native.

In the meantime, you can consider adjusting the codegen output styling options from “Tailwind” to “CSS” to resolve styling issues or have your team set up NativeWind support in your project.

Here is the code example using style attribute

```auto
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightblue',
  },
  text: {
    fontSize: 20,
    color: 'darkblue',
  },
});

export default MyComponent;

```

> **[Home | NativeWind](https://www.nativewind.dev/)**
>
> What is NativeWind?

> **[Expo Router | NativeWind](https://www.nativewind.dev/getting-started/expo-router)**
>
> Installation

Hope this helps! Let me know if you have any more questions.

Thanks,

---

<div class="post-metadata">

**Author:** ![mikey4281](https://avatars.discourse-cdn.com/v4/letter/m/dbc845/32.png) [@mikey4281](https://forum.builder.io/u/mikey4281)\
**Post date:** [January 11, 2025, 6:37pm UTC](https://forum.builder.io/t/integrating-code-from-builder-app-into-react/7082/10 "2025-01-11T18:37:40Z")

</div>

Hello Manish,

Ok thank you, I will try to create a react web app and test the code and use Nativewind as well.

Cheers