scrimba
Learn React for free
API Update: Please watch before proceeding
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

API Update: Please watch before proceeding
by Roku
AboutCommentsNotes
API Update: Please watch before proceeding
by Roku
Expand for more info
App.js
run
preview
console
import React, {Component} from "react"


// https://swapi.co/ (old)
// https://swapi.dev/


class App extends Component {
constructor() {
super()
this.state = {
loading: false,
character: {}
}
}

componentDidMount() {
this.setState({loading: true})
fetch("https://swapi.co/api/people/1")
.then(response => response.json())
.then(data => {
this.setState({
loading: false,
character: data
})
})
}

render() {
const text = this.state.loading ? "loading..." : this.state.character.name
return (
<div>
<p>{text}</p>
</div>
)
}
}

export default App
Console
/index.html
-1:26