Još od WordPress-a 5.0, React je njegov sastavni deo. React.js je najpopularnija front-end JavaScript biblioteka za izgradnju veb aplikacija.
Verovatno ćete se naći u situaciju da povezujete WordPress sa API-jem ili ćete želeti da proširite WordPress sa nekom dodatnom funkcijom.

logoi wordpressa i reacta na beloj pozadini

Kako dodati React.js

Da ne dužimo previše, najjednostavniji način na koji smo uspeli da implementiramo React.js aplikaciju u WP temu je sledeći:

U VS Codu kreirate React aplikaciju komandom:

npx create-react-app client –use-npm

Instalirate paket u VS codu:

npm install @wordpress/scripts

Više o paketu na: https://github.com/WordPress/gutenberg/tree/master/packages/scripts

Zamenite deo “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-ujte projekat korićenjem komande:

npm run build
Pojaviće vam se novi folder “build”.

dodavanje-react-aplikacije-u-wordpress-npm-run-build

Kopirajte ‘build’ folder u WordPress folder teme putanja:
“\wp-content\themes\twentytwenty\build”

[wp-folder-build.png]

Unutar fajla teme functions.php

“\wp-content\themes\twentytwenty\functions.php” dodajte dve nove funkcije:

6a. Prvo dodajte React skriptu:

Nađite funkciju twentytwenty_register_scripts() { }

Unutar funkcije, posle linije koda:

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

Dodajte sledeću liniju koda:

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

dodavanje-react-aplikacije-u-wordpress-enqueue-script

6b. Zatim dodajte React stil funkciji:

Nađite funkciju twentytwenty_register_styles() { }

Unutar funkcije, posle linije koda:
wp_enqueue_style( ‘twentytwenty-print-style’, get_template_directory_uri() . ‘/print.css’, null, $theme_version, ‘print’ );

Dodaj liniju:
wp_enqueue_style( ‘twentytwenty-react-style’, get_stylesheet_directory_uri() . ‘/build/index.css’, null, $theme_version, ‘all’ );