Cannot make react work on codepen

Cannot make react work on codepen
0

#1

Hi,

I have been trying to work with React on Codepen but even the most simple app doesn’t work. I wonder if I am missing a cue…

The code is:

class Pomodoro extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>Hello</div>
    );
  }
}

ReactDOM.render(<Pomodoro />, document.getElementById('wrapper'));

And both react.min.js and react-dom.min.js are added as well as Babel.

The funny part is that it works when I use the const Pomodoro = React.createClass method.

Please help! (I’m still so lost with react).


#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

I see a React component named Pomodoro, but none named Timer.

Did you check your browser console for errors?


#4

Sorry It was meant to be Pomodoro, I tried several things so I had them fixed up. Still didn’t work


#5

Link to a codepen project might help :roll_eyes:


#6

I’ve decided to do it with jquery for now. I need to go over React’s documentation to understand it better. Thank you anyway.


#7

I can’t actually find what is wrong with your code, but here is a working pen. Here is another pen that deals with data passing in React.

React is difficult to learn but very powerful and cool. It’s changed a little over the last few years (but not nearly as much as Angular) so some of the materials might be a little out of date, but they are still useful. I found going on youtube and coding along with tutorials to be quite beneficial.


#8

Thanks. I was very curious about what I would have to include in the settings window to get React pens to work. Appreciate you taking the time to whip this up.


#9

I know this post is old but it might help other people stopping by…
It could possibly be the Pen Settings on JS specifically. When you click the gear on the JS box, make sure “JavaScript Preprocessor” is set to “Babel”. Also, that you searched and clicked react and react-dom in the “Add External Scripts/Pens” section right under the preprocessor.