skip to Main Content

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:

 

  1. U VS Codu kreirate React aplikaciju komandom:

npx create-react-app client –use-npm 

 

  1. Instalirate paket u VS codu:

npm install @wordpress/scripts 


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

 

  1. 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“

}

 

  1. Build-ujte projekat korićenjem komande:

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

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

[wp-folder-build.png]

 

  1. 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 );

             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’ );

  1. Unutar template foldera „\wp-content\themes\twentytwenty\templates“

Kreirajte kopiju fajla template-full-width.php 

Promeni ime fajla „template-full-width – Copy.php“ na „template-react.php

 

  1. Izmenite fajl template-react.php

Obrišite ceo kod unutar fajla i ubacite kod ispod:

<?php

/**

 * Template Name: React Template

 */

get_header();

?>

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

<?php get_footer(); ?>

  1. Idite u WordPress dashboard i kreirajte test stranicu.

Promentite template na React Template

Publish page 

 10. Sada bi trebalo da vidite React.js aplikaciju kako radi unutar WordPress-a.

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

Back To Top