Skip to 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

Sign Up Now.

Follow.

Chat.

Contact Form.

    ime i Prezime*
    Email*
    Da li želite da ostavite broj mobilnog telefona?*
    Broj mobilnog telefona
    Kompanija/Organizacija*
    Website
    Šta je potrebno Vašoj kompaniji/organizaciji?
    Da li znate koje rezultate želite da postignete?*
    Koje rezultate želite da postignete?


    Mobile & Mail.

    Back To Top