NodeJS needed: https://nodejs.org/en/download/
VS Code as IDE: https://code.visualstudio.com/download
Creating a ReactJS Project
cmd command:
npx create-react-app fetch-data-from-rest
It creates the app that easy, wait a little bit and when it's done:
cd fetch-data-from-rest
npm start
React app will run, react default page will open.
To use Visual Studio Code as IDE, open a cmd, go to app directory, type:
code .
(you can use "npm start" in the Visual Studio Code's terminal)
App.js will be look like this:
I changed the code like this:
import React, { Component } from "react";
import './App.css'
//Consider render() method like main() method, so this class will be executed with export default
export default class FetchData extends React.Component {
state = { //the object that we use it store data and check if it's done with loading
loading: true,
jsondata: null
}
async componentDidMount() { //it's being invoked when a component mounted. to use await, i did async
const url = 'https://api.imgflip.com/get_memes';
const response = await fetch(url);
const data = await response.json();
//console.log(data); //With this, I found the array in data.memes. That's why setState-jsondata is like:
this.setState({ //when setState worked, render will be invoked again
loading: false,
jsondata: data.data.memes
})
}
render() {
if (this.state.loading) {
return (<div>Loading</div>);
}
if (!this.state.jsondata) {
return (<div>No Data</div>);
}
return (
<div className="App">
<ul className="meme-list">
{this.state.jsondata.map(meme => ( //map() works like array loop in here
<li>
<h1 className="meme-head">{meme.name}</h1>
<img className="meme-img" src={meme.url} />
<hr />
</li>
))
}
</ul>
</div>
);
}
}
Added some comment line but I'm gonna give more details if I can (probably not -_-')
Comments
Post a Comment