React apps on Webflow?

Publishing help General
1

If we wanted to build a React app with animations and modern UX on Webflow, would this be possible? If so, what would be the best way to approach this type of site?

1 Like
2

Check this one out, it’s possible :grinning:

webflow-react.webflow.io

@SidneyOttelohe is the creator

2 Likes
3

This was a pretty neat write up shared recently by @ConsciousApps which you may find helpful @cjroe Designing Apps using Webflow. Part 1 of 3 | by Martin Adams | ConsciousApps | Medium

2 Likes
4

Cool, thanks! What would be awesome is to have some sort of command line tool.

I see Firebase/Shopify with similar tooling.

Would be cool to somehow create an app structure in React and use the Webflow elements as style decorations on React Components.

For example:

<Sidebar style={Webflow.classes.sidebar} />
<Dashboard style={Webflow.classes.dashboard} />

OR:

<Webflow.Sidebar />

OR:

<Webflow>
    <Sidebar />
</Webflow>

class Sidebar extends Component {
    bindWebflow() {
        // hook into webflow events, styles, etc.
    }
}

Structure:

- src/
    - components/
        - Sidebar.js
        - Dashboard.js
    - app.js
    - package.json

Then literally just sync components to Webflow:

$ webflow sync app.js

Thoughts?

2 Likes
5

Had another idea on this…

If we could just get a hook into the API of each element that Webflow creates, developers could just build their apps directly with the API. So in that case, you could make an API call like:

GET /elements/:element_id

{
  "html": "<div class='element'></div>",
  "css": ".element { margin: 10px }",
  "interactions": [{slide_in: "some js code", slide_out: "some more js code"}]
  "react_snippet": "class Element extends React.Component { constructor() { this.styles = webflow.styles.bind(this); } render() { return (<div className='element' style={this.styles}></div>) } }"
}
6

Wishlist item here: Elements API (with React Components!) | Webflow Wishlist

1 Like
7

Hi @cjroe! I was thinking about similar stuff lately would be super cool, how I did it there with that todo app example is I made a static version of the component in Webflow and then used those classes I created in the React Component.

Would be slick if you could also tie in interactions and other types of events in a more native manner indeed!

8

Another thing that would be cool IMO is having WF’s designer UI on the right as a widget/plugin to attach inside of a code editor like atom etc, so you can write your html/jsx, but style the elements with the designer UI, especially for flexbox and such that would make my life a lot easier :stuck_out_tongue:

9

For sure! I think it would be really great to move toward a single-page web app experience on Webflow somehow. Having pages is great, but what about designing/building web apps? A widget/plugin might be the answer too.

10

We build in both React and Angular.

We tend to use Angular more so though.

11

Nice, I love Angular. Why the choice? Using 2? How’s Typescript?

12

Most people design / develop based on their skills.

(for me…) it doesn’t really matter which libraries we interact with.

I design / develop mainly based on client needs / requirements.

In these two particular cases… I’m actually the client…

  • this is product development that I am funding.

I chose Angular simply because (I find) Angular to be easier to implement.

Both will work. Just depends on your design / development methodology.

The resulting products don’t even use Webflow. I wrote a transfer program that converts the exported Webflow source into a Bootstrap / PHP / MySQL / Angular solution.

We chose the conversion route primarily due to a conflict we encountered with Webflow’s js implementation.

After hacking away at their source for a few months… Webflow released an update

  • and it hosed a large chunk of our system.

After that… it just made more sense to remove Webflow from the picture… and only use it to design.

13

Yeah, that stack is pretty novice. No worries. You’ll eventually see the benefits of React when you get to a point that you start building larger/complex apps. React makes the most sense - hence why Facebook built it.

14

This topic was automatically closed after 60 days. New replies are no longer allowed.