Assume, create-react-app installed. Otherwise, follow https://mrinalbd.com/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 lines. We will build this and know how this small peace worked. Deleting all lines will produce an error on the 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 the type React and axios name.React is capitalize and axios are lowercase.

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

class App extends React.Component {

}
export default App;

React.Component class has 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 titles.

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 https://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 an 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("https://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 the object. So, this posts array can map with a function where the post title is rendered in list style.

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

As posts 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("https://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;