Casts
Playgrounds
Templates
Forks
import React, {Component} from "react"
class MemeGenerator extends Component {
constructor() {
super()
this.state = {
topText: "",
bottomText: "",
randomImg: "http://i.imgflip.com/1bij.jpg",
allMemeImgs: []
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
} import React, {Component} from "react"
class App extends Component {
// Change to use class properties
state = { firstName: "" }
// Change to use arrow functions
handleChange = (event) => {
const { name, value } = event.target
this.setState({
[name]: value
})
}
Learn React for free
import React, { Component } from "react"
class MemeGenerator extends Component {
constructor() {
super()
this.state = {
topText: "",
bottomText: "",
randomImg: "http://i.imgflip.com/1bij.jpg",
allMemeImgs: []
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
} import React from 'react';
import ReactDOM from 'react-dom';
class Main extends React.Component {
render() {
return (
<h1>Hello world!</h1>
);
}
}
ReactDOM.render(<Main />, document.getElementById('root')); import React from "react"
import ReactDOM from "react-dom"
// JSX
ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root"))
var myNewP = document.createElement("p")
myNewP.innerHTML = "This is a paragraph."