How can I make a reactjs firepad component?

[Joshua LeDuc]

So I've been learning react, and wanted to make a basic firepad instance. My current setup is having one container div in my index.html, and having all of my react components rendering through that div. My current attempts and the code I'm showing with this have been in an environment with gulp and browserify, but I'm also playing around with ES6 and webpack. So I'm pretty flexible about getting this working as I learn. Here's the code:

"use strict"


var React = require('react')
  , Firebase = require('firebase')
  , fbRoot = 'myURL'
  , CodeMirror = require('codemirror')
  , Firepad = require('firepad')
  , firepadRef = new Firebase(fbRoot + 'session/')
  , myCodeMirror = CodeMirror(document.getElementById('firepad'), {lineWrapping: true})
  , myFirePad = Firepad.fromCodeMirror(firepadRef, myCodeMirror, { richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!'});


var WritePage = React.createClass({
  render: function(){
    return (
      <div>
        <div id="firepad"></div>
      </div>
    );
  }
});


module.exports = WritePage;

The first error I was getting was that it couldn't find the codemirror.js file. Although CodeMirror was being correctly defined in Chrome's dev tools, I moved that from requiring the npm package to just linking the 2 needed codemirror files to my html. It then gave me an error about not being able to take .replaceChild of undefined. I then tried moving all of the dependency files over to my index.html, but still had the same .replaceChild error. Anyone have any experience with react and firepad? I read in the reactfire docs that it's one way binding from firebase to my site, which for my case making a read-only firepad would be fine. Like I said, I'm flexible all of this stuff is new to me.

[Michael Lehenbauer]

Hey Joshua,

I'm not very familiar with react, but I'm guessing you need to somehow move

  , myCodeMirror = CodeMirror(document.getElementById('firepad'),{lineWrapping: true})
  , myFirePad = Firepad.fromCodeMirror(firepadRef, myCodeMirror, {richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!'});

so that it runs after the div has been rendered into the DOM.  Based on this StackOverflow answer it looks like perhaps you should move it into a componentDidMount function.

Hope this helps!

-Michael

--
You received this message because you are subscribed to the Google Groups "Firepad" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firepad-io+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firepad-io/786f4058-ed43-4d04-8f1d-db007a50962f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jacob Wenger]

Yup, that should do it. The problem is that you are trying to reference a DOM element before React has rendered your component. If you move that into componentDidMount(), you'll be able to reference the DOM node. You will also probably find it easier to use the React ref attribute instead of document.getElementById().

Cheers,

Jacob

To view this discussion on the web visit https://groups.google.com/d/msgid/firepad-io/CAJCyStdqwiA3ctcgJgtyFG-uVBhjR%2BxdKzF5-a1o8%2B%2BxsaBX%2Bg%40mail.gmail.com.

[Joshua LeDuc]

Thank you both for your help, that works perfectly. For future reference, being new to firebase and a new developer in general, is bad practice to ask a question both this group and stack overflow?

[Michael Lehenbauer]

Glad to hear!

I consider it ever-so-slightly frowned-upon since you may get two different people answering your question in two different places, which isn't very efficient (I'd be annoyed to write up a long, detailed answer only to find that somebody else had already answered the question elsewhere).  So what I'd typically suggest is to wait at least a day or so before posting on the 2nd forum and if you do, link to your first post.  That way it's easier for people to check if the question has already been answered elsewhere before investing in writing up a response.

Best regards,

-Michael