Skip to Main Content

Since WordPress 5.0, React is an integral part of it. React.js is the most popular front-end JavaScript library for building web applications.
You will probably find yourself in a situation to connect WordPress sa API-jem or you will want to expand WordPress with some additional function.

wordpress and reacta logos on a white background

Not to lengthen too much, the simplest way we have managed to implement React.js The application in the WP theme is as follows:

 

  1. In VS Code you create React application command:

npx create-react-app client –use-npm 

 

  1. You install the package in VS code:

npm install @ wordpress / scripts 


More about the package at: https://github.com/WordPress/gutenberg/tree/master/packages/scripts

 

  1. Replace part "scripts”U package.json 

"Scripts": {

"Build": "wp-scripts build",

"Check-engines": "wp-scripts check-engines",

"Check-licenses": "wp-scripts check-licenses",

"Format: js": "wp-scripts format-js",

"Lint: css": "wp-scripts lint-style",

"Lint: js": "wp-scripts lint-js",

"Lint: md: docs": "wp-scripts lint-md-docs",

"Lint: md: js": "wp-scripts lint-md-js",

"Lint: pkg-json": "wp-scripts lint-pkg-json",

"Packages-update": "wp-scripts packages-update",

"Start": "wp-scripts start",

"Test: e2e": "wp-scripts test-e2e",

"Test: unit": "wp-scripts test-unit-js"

}

 

  1. Build-Use the project using the command:

npm run build
It will appear to you new “build” folder.

  1. Copy 'build' folder u WordPress path theme folder:
    "\ Wp-content \ themes \ twentytwenty \ build"

[wp-folder-build.png]

 

  1. Inside the theme.fp theme file 

"\ Wp-content \ themes \ twentytwenty \ functions.php" add two new features:

 

              6a. Add first React script:

Find a function twentytwenty_register_scripts () {}


Within the function, after the code line:

wp_enqueue_script ('twentytwenty-js', get_template_directory_uri (). '/assets/js/index.js', array (), $ theme_version, false);

Add the following line of code:

wp_enqueue_script ('twentytwenty-react-js', get_template_directory_uri (). '/build/index.js', ['wp-element'], $ theme_version, true);

             6b. Then add React function style:

Find a function twentytwenty_register_styles () {}


Within the function, after the code line:
wp_enqueue_style ('twentytwenty-print-style', get_template_directory_uri (). '/print.css', null, $ theme_version, 'print');

 

Add a line:
wp_enqueue_style ('twentytwenty-react-style', get_stylesheet_directory_uri (). '/build/index.css', null, $ theme_version, 'all');

  1. Within template folder \ \ wp-content \ themes \ twentytwenty \ templates

Make a copy of the file template-full-width.php 

Change filename "template-full-width - Copy.php" to "template-react.php"

 

  1. Edit the template-react.php file

Delete all code inside the file and insert the code below:

/ **

 * Template Name: React Template

 */

get_header ();

?>

  1. Go to WordPress dashboard and create a test page.

Change template na React Template

Publish page 

 10. You should see now React.js application how it works inside WordPress-and.

Made by Aleksandar Đurđević - Senior Web Developer @Digitizer