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

Amit Bhagat · Accepted Answer · 2017-11-11 06:54:12Z

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, 2017 at 6:54

Amit Bhagat

4,3463 gold badges25 silver badges24 bronze badges

answered Feb 14, 2017 at 9:13

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

4 Comments

JessieZhou Over a year ago

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

Mayank Shukla Over a year ago

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.

Gorky Over a year ago

Omit the import line

Thomas Levesque Over a year ago

This is useless. It doesn't solve the 'require is not defined' error.

Gorky · Accepted Answer · 2019-11-29 03:16:55Z

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, 2019 at 3:16

answered Nov 29, 2019 at 0:52

Gorky

1,42319 silver badges22 bronze badges

1 Comment

Thomas Levesque Over a year ago

This should be the accepted answer

loop · Accepted Answer · 2021-05-01 10:53:56Z

3

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

import { default as React } from 'https://cdn.skypack.dev/[email protected]';
import { default as ReactDOM } from 'https://cdn.skypack.dev/[email protected]';

answered May 1, 2021 at 10:53

loop

1,0238 silver badges17 bronze badges

Comments

FisNaN · Accepted Answer · 2018-02-19 03:32:21Z

2

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

answered Feb 19, 2018 at 3:32

FisNaN

2,9152 gold badges30 silver badges43 bronze badges

Comments

DroidNoob · Accepted Answer · 2017-02-14 09:18:05Z

1

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'));

answered Feb 14, 2017 at 9:18

DroidNoob

1,1439 silver badges21 bronze badges

Comments

Avraam Mavridis · Accepted Answer · 2017-02-14 09:18:32Z

1

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

answered Feb 14, 2017 at 9:18

Avraam Mavridis

8,97023 gold badges87 silver badges136 bronze badges

1 Comment

JessieZhou Over a year ago

Thank you very much~ I will try Webpackbin later~

Dan Andersson · Accepted Answer · 2017-02-14 09:27:01Z

0

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'));

answered Feb 14, 2017 at 9:27

Dan Andersson

3371 silver badge6 bronze badges

Collectives™ on Stack Overflow

how to use react in Codepen with es6

7 Answers 7

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related