Tag: Axios

Assume, create-react-app installed. Otherwise, follow http://mrinalbd.com/2019/07/01/start-adventure-with-react/

Install brand new app with bash command.

npx create-react-app mrinalreact

Then, change directory and npm start with following command

cd mrinalreact && npm start

App will start at http://localhost:3000/

We can use any AJAX library you like with React. Some popular ones are Axios, jQuery AJAX, and the browser built-in window.fetch. I use Axios for this application. Install axios with npm by typing command

npm install axios

Let’s open src/index.js, Here, ReactDom render App class at document element which ID root. This root element lives in our output page public/index.html.

Let’s open src/App.js. Delete all line. We will build this and know how this small peace worked. Deleting all lines will produce a error on browser.
Why does it happen? Because, this app going its journey from public/index.html ‘s id root. But, our app can’t have a class or function App.

For this post we will develop only one file-src/App.js. Open it and import React and Axios from respective packages at first.

import React from "react";
import axios from "axios";

Be careful about type React and axios name.React is capitalize and axios is lowercase.

Define App class by extending React’s Component class. Don’t forget to export default App class. In react class or function is export in two ways-Named and Default. I will discuss about these on another post.

class App extends React.Component {

}
export default App;

React.Component have a function named render() which return anything we write here. For our application, we use this render() to show output. Let’s output a list of dummy posts title.

import React from "react";
import axios from "axios";

class App extends React.Component {
 render() {
   return (
    <div>
      <ul>
        <li>First post</li>
        <li>Second post</li>
        <li>Third post</li>
      </ul>
    </div>
   );
 }
}
export default App;

It show ordinary and boring dummy title list as

To store all posts in our application, let’s create a store in App class. Here, posts array will store all posts.

  state = {
    posts: []
  };

I will fetch all posts from this WordPress site with axios get method. All posts live at http://mrinalbd.com/wp-json/wp/v2/posts.

At react, there are several life cycle hook available. Posts will fetch by axios when this component mounted. So, we will use componentDidMount().

At componentDisMount(), axios will fetch data from http://mrinalbd.com/wp-json/wp/v2/posts. If this fetching success, then axios promise to run a function. To write this function, I will use array function style. In this function we will get posts from response data and set it in our state’s posts array. setState() is special method to update state.

componentDidMount() {
    axios.get("http://mrinalbd.com/wp-json/wp/v2/posts").then(response => {
      const posts = response.data;
      this.setState({ posts });
    });
  }

Finally, we will show it in our boring list. In Javascript, array elements can map. But, we can’t map object. So, this posts array can map with a function where post title is rendered in list style.

{this.state.posts.map(post => (
    <li>{post.title.rendered}</li>
))}

As post will grow this list will grow. So, my final code of src/App.js

import React from "react";
import axios from "axios";

class App extends React.Component {
  state = {
    posts: []
  };
  componentDidMount() {
    axios.get("http://mrinalbd.com/wp-json/wp/v2/posts").then(response => {
      const posts = response.data;
      this.setState({ posts });
    });
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.posts.map(post => (
            <li>{post.title.rendered}</li>
          ))}
        </ul>
      </div>
    );
  }
}
export default App;