WP Plugin Development with React.js | JSON & COVID-19 Data API

-

Creating simple React.js plugin and activating it

After development a plugin which used jQuery library for handling API requests and user interface creation I decided to create another one. This time I'd like to use one of the most popular JavaScript library on the market - React.js.

I took similar approach to previous plugin and created dedicated folder with functions.php file and imported required scripts from CDN  (Content delivery Network) using wp_enqueue_script() WordPress method.

Had to import babel library to transpile  JSX (JavaScript XML) into normal JavaScript code which can be used by the browser.

JSX allows to write HTML elements in JavaScript and place them in the DOM (Document Object Model) without the need of use createElement() and appendChild() methods - which I used with jQuery before.


Shortcode API was used to inject my React content in the required place. For that I created function displayReactPage() with echo and file_get_contents() methods to display html file in the web browser. Only thing left to do was to activate the plugin from wp-admin dashboard.


HTML file contains one div with id "root" all React content is rendered inside that using ReactDOM.render() method which takes what to render, in this case <App /> component and the destination - div grabbed by id using JavaScripts document.getElementById() function. It is treated as Single Page Application (SPA) because dynamic changes inside that container happens without reloading the whole page.


 

React plugin functionality development

Plugin utilises free API for the data on COVID-19 coronavirus. On load it displays Global (world) data then user can enter name of the country to get its data.



Simple error handling is implemented to prevent user to send an empty request. Any other invalid request will return World data as default.

GET DATA button has onClick (executes when user click on it) function attached, which checking content of the input (stored in inputData variable) if empty (no data entered) it sets variable setInputError to true... which generates above error message. If all is alright it stores the input data (which is send in the request), and reset content of the input. 


React's conditional rendering is used to display error message. It basically checks if input error is set to true then renders it if false return nothing and message dissappear. 


Data is grabbed using JavaScript Fetch API and fetch() method, then stored in the variable which is overwritten every time when the new request is made.

Sometimes New Cases and New Deaths data is not updated and return as empty values I decided to add "No Data" text in case this information is not provided at the time of request and provide of collapsing (empty) output fields. It is checked by if statement and length of the returned fields if not 0 then it will be overwritten by the actual data if 0 then stays as "No Data" text.

  


Function is executed every time when variable country is changed which happens after click on get data button. React hook useEffect is used for that - where as a second parameter we enter is variable name to be tracked by React and on every change triggers re-render of the screen.
 


User Interface

User interface is generated when covidData variable has required data fetched. If there is some network error or bad request then warning screen is generated.


If request is successful and data acquired it is stored in the covidData useState() hook - method that allows to take care of state of the application inside the functional component (don't need to use class components anymore to use state).

I store other data as a state using  useState() method. This lets React's render parts of the user interface accordingly. 


State variable country held data for creating HTTP request. It is interpolated as a last part of the URL string.


Rest of the state variables are used as a dynamically changing data injected with ${name of variable here} syntax inside the HTML template created with JSX




 
 

Comments

Post a Comment

Popular posts from this blog

E-Commerce made easy with WordPress & WooCommerce

-
Image
  E-commerce introduction E-commerce (electronic commerce) refers to transactions conducted via the World Wide Web. It may involve buying physical or digital products, ordering services or transfer funds. It is booming sector with revenue growing every year. Even  in uncertain times of covid-19 pandemic online shopping is thriving. Purchasing goods from the comfort of own homes and get them delivered even the same day is changing the way how people perceive shopping process. Old ways of buying from brick and mortar stores are about to extinct. Time is the crucial factor when it comes to sales and if shops or manufacturers wants to be competitive on the market starting an online selling platform should be easy and quick. WordPress designed as a blogging platform became now home to millions of businesses thanks to plethora of plugins which allow to set-up selling goods and services in a matter of hours. WooCommerce installation and Setup I will demonstrate how easy is to add the...
Read more

Wordpress Environment Setup

-
Image
Wordpress require server environment (Apache, Nginx), PHP and access to MySQL or MariaDB for storing information. There are couple options available how we can to start developing wordpress powered websites:  Buy dedicated hosting space ( https://wordpress.com/pricing/ ) Create own server based on Cloud Computing Services Amazon AWS  Light Sail or  Digital Ocean  droplet Install on own Apache, Nginx server Linux based computer or raspberry Pi device Install PHP development environment on local desktop laptop -  XAMPP Use popular containerized approach with  Docker I'm going to setup my development environment using Docker. This will remove the hassle of installation and configuration required software on local computer. Instead I will create Docker compose file which use separate image files for (wordpress, php myadmin, and mySQL) and allow for one command set-up of whole environment. All required image files can be found on  Docker Hub  - libra...
Read more

Creating Frontend with React.js

-
Image
 Installing React Development Environment Now let's build independent frontend for the wordpress website using React.js - JavaScript library for creating user unterfaces.  To install React development we use popular npm (Node Package Manager) package  - create-react-app .  I created folder "frontend" for the react application in root folder of the wordpress website. Then use command npx create-react-app . in that folder to scaffold starting react project. Please don't forget to install Node.js which is required for React & NPM packages!! After successful installation we can compile and run the react app in the browser using npm start command in the terminal. Result in the browser, url address http://localhost:3000 Let's install additional NPM packages axios and react-router-dom . First is a promise based HTTP client for the browser and node.js, and second is a tool to handle routes in a single page application using dynamic routing. List of all installed...
Read more