Cannot make react work on codepen

JavaScript
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.

markdown_Forums

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.

1 Like
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.

3 Likes
10

Thanks! this helped me out!

11

May God bless you. I’ve spent the whole night working on how to may react work in codepen.

12

Thank you for this answer!

13

Personally I find


better for a React project. It is simply: New Sandbox and then they have lots of templates or one can import a Github repo. There are some nice features that Codepen does not have, one of them is the possibility to add resources and to do pair programming
/Jakob