This tutorial was bootstrapped with Create React App.
Please Note: This tutorial is deliberately rather bland at an appearance level. The reason for this is simple - the goal of this tutorial is NOT to show you how to create a pretty website but rather, the goal is to show you how to obtain JSON data from the Wordpress API using the AXIOS library from within a React application. It is assumed you are capable of designing a "pretty website" yourself.
If you would like to see an example of a "pretty website" which uses all these technolgies at the same time, please visit https://news.velodata.org
React.js is currently a fast moving technology. Recently, as of React v16.7 I believe, React Hooks have become a vitally important part of the React User State environment, but these Hooks are not compatible with Class Based Components, they're only compatible with Functional Components.
Also, the highly important React Router system changed in a major way from v6.0 onwards. When defining routes, it no longer uses the the "component" inner tag it now uses the "element" inner tag. For this reason, and the above reason, this tutorial deliberately avoids diving too deep into components and router definitions. The reader will not I've included a "High Order Component" function in the postview.js file specifically to allow the passing of props as parameters between class based components.
Download a ZIP version of the Tutorial and extract the zip file into a project directory of your choice. In your destination project directory, you should first run:
There are several library dependancies required for this tutorial to run correctly.
Then, after installing all the relevant dependancies, you should run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.