how to use react in Codepen with es6

Question

http://codepen.io/JessieZhou/pen/VPgMdP ,Here is a demo using React in CodePen, but the browser gives an error "Uncaught ReferenceError: Component is not defined". However, if I insert a line "import {Component} from 'react'" in the first line, the error will be "Uncaught ReferenceError: require is not defined". Is it possible that the usage of 'class' causes this problem?

Here is my code:

//import {Component} from 'react'
class MyInput extends Component{
   constructor(props){
     super(props);
     this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e){
     this.props.update(e.target.value);
   }

   render(){
     return <input onChange={this.handleChange} type="text"/>
   }
}
ReactDOM.render(MyInput, document.getElementById('myinput'));

Here is my javascript settings in CodePen: javascript settings in codepen

score 7 · Accepted Answer · edited Nov 11 '17 at 06:54

7

Reason is Component is part of React, to access that you need to use React.Component, if you directly want to use Component, then first import it from react, like this:

import {Component} from 'react';

Use this:

class MyInput extends React.Component{
    constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){
    console.log('e', e.target.vaule);
  }
  render(){
    return <input onChange={this.handleChange} type="text"/>
  }
}
ReactDOM.render(<MyInput/>, document.getElementById('myinput'));

Check codepen

edited Nov 11 '17 at 06:54

Amit Bhagat

4,182
3
23
24

answered Feb 14 '17 at 09:13

Mayank Shukla

100,735
18
158
142

1

Thank you very much! Use React.Component will work, but if I want to use Component, "import {Component} from 'react'" is still not working, the error is "Uncaught ReferenceError: require is not defined"... – JessieZhou Feb 14 '17 at 09:38
use this line in ur project, it will work, in codepen we used to use lib links, that's why we have to use complete React.Component. – Mayank Shukla Feb 14 '17 at 09:57
Omit the import line – Gorky Nov 29 '19 at 03:18
This is useless. It doesn't solve the 'require is not defined' error. – Thomas Levesque Feb 06 '22 at 00:18

Gorky · Answer 2 · 2019-11-29T03:16:55.887

4

Instead of using import, use destructuring assignments to get React.Component. After adding react to codepen through js settings, it executes the script which will make React available on global scope, window.

const {Component} = React;
class MyInput extends Component{
    //Component code
}

edited Nov 29 '19 at 03:16

answered Nov 29 '19 at 00:52

Gorky

1,393
19
21

This should be the accepted answer – Thomas Levesque Feb 06 '22 at 00:18

score 2 · Answer 3 · answered Feb 19 '18 at 03:32

I noticed that process.env.NODE_ENV is undefined in ReactDOM 16.2 js file, if you import the CDN from Quick-add.
The solution is to use the development react and ReactDOM modules from unpkg.com:

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

There is the example works on React 16.2: CodePen

score 2 · Answer 4 · answered May 01 '21 at 10:53

2

Nowadays it is possible to do direct ESM imports from Node packages to Codepen code:

import { default as React } from 'https://cdn.skypack.dev/react@15.4.2';
import { default as ReactDOM } from 'https://cdn.skypack.dev/react-dom@15.4.2';

answered May 01 '21 at 10:53

loop

825
6
15

score 1 · Answer 5 · answered Feb 14 '17 at 09:18

Component is a subclass of react. So either you import it or use React.Component During render you have to use jsx MyInput wont work. <MyInput/> will work

class MyInput extends React.Component{
    constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){
    this.props.update(e.target.value);
  }
  render(){
    return <input onChange={this.handleChange} type="text"/>
  }
}
ReactDOM.render(<MyInput/>, document.getElementById('myinput'));

score 1 · Answer 6 · answered Feb 14 '17 at 09:18

1

You can do class MyInput extends React.Component or switch to Webpackbin

answered Feb 14 '17 at 09:18

Avraam Mavridis

8,698
19
79
133

Thank you very much~ I will try Webpackbin later~ – JessieZhou Feb 14 '17 at 09:59

score 0 · Answer 7 · answered Feb 14 '17 at 09:27

You have to extend React.Component, not just Component.

And you have to render <MyInput /> instead of MyInput.

Try this instead

class MyInput extends React.Component{
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){
    this.props.update(e.target.value);
  }
  render(){
    return <input onChange={this.handleChange} type="text"/>
  }
}

ReactDOM.render(<MyInput />, document.getElementById('myinput'));

how to use react in Codepen with es6

7 Answers7