React.js library not working on CodePen?

Question

I'm having a very simple issue with using React.js on CodePen! I'm new to React, and I'm trying to use the React library on CodePen. It just doesn't appear to be working for some reason, even though I'm also using Babel as the pre-processor.

I feel like this may have something to do with the version I'm using? - 15.3.1

http://codepen.io/anfperez/pen/aBomwp

My code:

var React = require('react');
var ReactDOM = require('react-dom');

var Test = React.CreateClass({
  render: function() {
    return (
    <h2> Yo </h2>
    );
  }
});

ReactDOM.render(<Test />, getElementById("test"));

Any tips are appreciated.

Sean · Accepted Answer · 2016-11-03 13:07:08Z

1

The problem is RequireJS is not needed for your example. Please try: http://codepen.io/anon/pen/JbPWeO

var Test = React.createClass({
    render: function() {
        return (
            <h2> Yo </h2>
        );
    }
});

ReactDOM.render(<Test />, document.getElementById("test"));

edited Nov 3, 2016 at 13:07

answered Nov 2, 2016 at 15:25

Sean

8547 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Leia_Organa Over a year ago

Thank you. I tried putting in different versions of Require.js, but none of them seem to work. I'm using the latest version of React on CodePen (15.3.1) so I'm not sure if that's actually the issue or not, unless there's a version of Require.js that works best with that version of React...

Sean Over a year ago

@Leia_Organa My apologies, I didn't read this completely. Removing the first two lines of your example will allow it to work. In this case, you do not need RequireJS for your example to function. Please see: codepen.io/anon/pen/JbPWeO

Leia_Organa Over a year ago

Thank you! That was a simple fix and totally worked!

ulou · Accepted Answer · 2021-06-11 19:02:22Z

1

You should add these external scripts in your javascript pen settings :

https://unpkg.com/react/umd/react.development.js

and

https://unpkg.com/react-dom/umd/react-dom.development.js

edited Jun 11, 2021 at 19:02

ulou

5,9326 gold badges40 silver badges51 bronze badges

answered Jun 11, 2021 at 18:01

Vivek

112 bronze badges

Comments

inhaq · Accepted Answer · 2016-11-02 15:31:09Z

0

Here are some suggestions:

You should also need to include ReactDOM as you only included React in Codepen.
Line 4 should be React.createClass (createClass should be in Camel case).
Line 12 should be document.getElementById instead of getElementById

answered Nov 2, 2016 at 15:31

inhaq

3561 gold badge6 silver badges15 bronze badges

1 Comment

inhaq Over a year ago

My pleasure. I just check the code and assume these might be causing you problem although I didn't try to run that code.

Ranjan_kumar_2000 · Accepted Answer · 2020-10-28 09:09:54Z

0

Add react-js first and then add react-dom js, the order matters in code pen or it will show error

answered Oct 28, 2020 at 9:09

Ranjan_kumar_2000

1

Collectives™ on Stack Overflow

React.js library not working on CodePen?

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related