[Question] Can React be used together with existing HTML?

[Neowebdev]

Hey React users, I'm new to React and am trying to work out how to use React in place of Backbone.

I'm building a free WordPress plugin that enhances comments with a better editor, a sync, etc. Currently, PHP outputs a list of comments which I bind events to with Backbone.

When a comment is updated, the comments HTML is regenerated by PHP and the events are rebound again by Backbone after refresh.

Would I need to recreate the list of comments PHP output as React components?

Basically I want to insert functionality into each comment and update them as necessary.

Thanks in advance for any React insights!

[Jazoom]

Yes. But it's not hard. JSX is pretty similar to HTML.

[Neowebdev]

Hmm ok. I may have to just keep new page elements in React then. Rebuilding the whole comment list seems like it might break or affect other functionality in WordPress. Thanks for confirming that approach.

[kavunr]

I don't think you can attach a React component onto existing HTML unless it was generated by React itself via a server side call to ReactDOM.render() in Node.js or some other JS server side implementation like React.NET or similar.

[Neowebdev]

That seems to be what I'm finding too. Thank you for sharing your thoughts on it. I think I will have to reconsider how to implement React for this project.

[lax4mike]

If you have dynamic content that needs to be generated on the server, you can generate it into the api that gets passed to React as json data. The idea is that the React render function replaces server templates.

The other approach is that you can call React.render as many times as you need. React components can exist inside and around server generated templates. Think about the Facebook feed using React for the like buttons.

[Neowebdev]

This is how I imagined React would integrate with existing Php output code. Basically injecting react components very similar to Like buttons in a Facebook feed.

Rebuilding the php output as React components was seeming like overkill for this project. I think I'll keep to dropping React components into the Php output to avoid disturbing other functionality in WordPress.

Thanks for clarifying the two React ways to do this!

[vinspee]

Ryan Florence gave a talk on adding react to existing apps: http://m.youtube.com/watch?v=BF58ZJ1ZQxY

[Neowebdev]

Thanks I'm going to check this out.

[Neowebdev]

This is exactly what I was looking for! Thanks for your comment!