CRUD on WordPress content with React

-

What the... CRUD?

CRUD are most popular operations which can be performed on the files or data stored in the database. The acronym is often used in web development with HTTP RESTful APIs methods to perform certain tasks as:

  • C - CREATE or construct where new file is created or new content is added to the database. HTTP method POST is used for that operation.
  • R - READ reading the content, requesting the file from the server or database with HTTP's GET method. It shouldn't be used for requesting any sensitive data because everything is visible in URL query string.
  • U - UPDATE an existing content and store changes using HTTP methods - PUT or PATCH.
  • D - DELETE - permanently removes file or records from the database. HTTP method DELETE.


Read all available posts

WordPress posts are fetched with axios library and stored in the state as an array of the posts. In react we need to loop through this array to get every post and display in separate component using JavaScript's map() method. Content of the post is available using . notation and injected into JSX with { } - curly brackets.


Unfortunately there are some displays error because WordPress keeps HTML tags stored together with the content and returns it within JSON data.

And Reacts renders them as normal text without proper parsing


Fix for that is adding to the post container dangerouslySetInnerHTML() which is React's version of innerHTML() method. In general setting HTML is risky because there is chance to expose users for cross-site-scripting (XSS) attacks. So there is reminder of that in the name of the function.

But this method fixes display problem and Post is rendered without HTML tags now. 


Create, Update and Delete Posts.

To be able to create, update or delete posts we must be authenticated by the WordPress. I described steps needed for JSON Web Token authentication more in depth here.

Now I will focus on steps required for the frontend React Application to perform all HTTP requests. Firstly I created login system where user is giving name and password and if matches the database record special JSON web token is generated and returned to the browser which is stored in the cookie thanks to js-cookie javascript library for handling cookies.





User's name is saved in the local storage for later use in authenticating access to different parts of the website.



When user is logged there is automatic redirection to the admin dashboard where new post can be created, any post can be deleted, and post can be updated as well. The Logout is added to the header navigation menu - after click on it all data stored in the cookie and local storage will be wiped out.


Create Post

When creating new post token need to be included in the HEADERS of  the POST request to prove that it is sent by legitimate user. Function getCookie("token") grabs token stored in the browser's cookie and adds it to the "Bearer " which is the proper way of authenticating web tokens. Token is decoded on the WordPress backend by JWT Authentication for WP-API plugin and if everything is correct new post will be saved.


If OK...


Delete Post

To delete any post logged in user can choose it from the bottom list and click 'Delete' button which fire up deletePost(id) function. Id of the post is passed as an argument and is added to the URL address for the HTTP DELETE method. Again Authorization token need to be sent in the header of the request.




If all Good... Visual confirmation is displayed and post removed from the list and the database.

Update, Edit the Post

To update title or the content of the post user clicks on Edit button then is being redirected to the new screen (page) when post data is already inserted into the proper input fields. This time HTML tags are available to add a opportunity of simple formatting how the post looks. Uploading images is not available here and I strongly recommend to use native WordPress Content Management Functionality for edits and creating new content.   



 




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