Getting started with react on codepen

JavaScript
1 
How to use work with react in codepen
class Html extends React.Component
{
  constructor(props)
  {
    super(props);
  }
  render()
  {
    return(
   <div>hello</div>
    );
  }
};
2

Honestly, I suggest using something other than CodePen, such as jsbin.com or codesandbox.io [edit in 2021: I highly suggest codesandbox]. If you really want to use CodePen, you need to add react as a JS dependency. Click on “Settings” at the top of your pen, then “Javascript” in the pop-up. Under “javascript preprocessor”, select Babel, and under “add external scripts/pens”, type “react”. Select both react and react-dom. You should now be ready to use React.

On jsbin, you just need to add the relevant <script> tags, with none of this hoop-jumping.

7 Likes
3

I did that but it is still not working

5

So please give us a link to your code in codepen, jsbin or codesandbox

6
7

https://fb.me/react-dom-15.1.0.min.js
https://fb.me/react-15.1.0.min.js
import this and it will work

8

I went to this Pen and did what they did. They added “//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js” under the javascript settings like this…

codepen
codepen506Ă—563 36.6 KB

9

I’ve created react project using create-react-app and want to run in codepen but it’s not working even with above solution.

How did you create your project ?