Simple Axios

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<div id="root"></div>

Babel + JSX

class PersonList extends React.Component{
	state = {
  	persons: []
  }
  
  componentDidMount(){
  	axios.get('https://jsonplaceholder.typicode.com/users')
    .then(res => {
    //console.log(res);
    	this.setState({ persons: res.data});
    })
  }
  
  render(){
  	return (
    	<ul>
    	  {this.state.persons.map(person => <li key={person.id}>{person.name}</li>)}
    	</ul>
    )
  }
}


class App extends React.Component{
	render(){
  	return(
    	<div className = 'App'>
    	  <PersonList />
    	</div>
    )
  }
}


ReactDOM.render(
	<App />,
  document.getElementById('root')
)