Ever since WordPress 5.0, React is its integral part. React.js is the most popular front-end A JavaScript library for building web applications.
You’ll probably find yourself connecting WordPress with an API , or you’ll want to extend WordPress with some additional functionality.

How to add React.js

Without further ado, the simplest way we’ve been able to implement a React.js app in a WP theme is as follows:

1. In VS Code, you create a React application with the command :

npx create-react-app client –use-npm

2. Install the package in VS Code:

npm install @wordpress/scripts

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

3. Replace the “ scripts ” part in 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”

}

4. Build the project using the command:

npm run build
A new “build” folder will appear .

5. Copy the ‘build’ folder to the WordPress theme folder path:
   “\wp-content\themes\twentytwenty\build”

[wp-folder-build .png]

6. Inside the functions.php theme file

“\wp-content\themes\twentytwenty\functions.php” add two new functions:

6a. Add first React script:

Find function twentytwenty_register_scripts() { }

Inside the function, after the line of code:

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 style function:

Find function twentytwenty_register_styles() { }

Inside the function, after the line of code:
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’ );

7. Inside the template folder “\wp-content\themes\twentytwenty\templates”

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

Rename the file “template-full-width – Copy.php” to “ template-react.php “

8. Edit the template-react.php file

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

<?php

/**

* Template Name: React Template

*/

get_header();

?>

<div id=”root”>< /div>< !– #react-app –>

<?php get_footer(); ?>

9. Go to the WordPress dashboard and create a test page.

Change the template to React Template

Publish page

10. You should now see a React.js application running inside WordPress .

Useful links:

https://javascriptforwp.com/adding-react-to-a-wordpress-theme-tutorial/

https://snipcart.com/blog/reactjs-wordpress-rest-api-example

https://www.w3schools.com/react/

https://www.udemy.com/course/wordpress-plugin-development-react/learn/lecture/

For more news and interesting stories from digital marketing, visit our blog page or follow our Instagram profile.