Building a website can be a demanding task, and costs can vary significantly depending on…
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.
How to add React.js
Not to lengthen too much, the simplest way we have managed to implement React.js The application in the WP theme is as follows:
- In VS Code you create React application command:
npx create-react-app client –use-npm
- 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
- 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”
}
- Build-Use the project using the command:
npm run build
It will appear to you new “build” folder.
- Copy 'build' folder in WordPress path theme folder:
“\ Wp-content \ themes \ twentytwenty \ build”
[wp-folder-build.png]
- 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');
- Within template “\ wp-content \ themes \ twentytwenty \ templates” folder
Make a copy of the file template-full-width.php
Change filename “template-full-width - Copy.php” to “template-react.php"
- Edit the template-react.php file
Delete all code inside the file and insert the code below:
<?php
/ **
* Template Name: React Template
*/
get_header ();
?>
- 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.
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.
Made by Aleksandar Đurđević - Senior Web Developer @Digitizer