BUILDINGWEBSITESUSINGREACT.JS ANDWORDPRESS

APIMITKO KOCHKOVSKI

@M1TK00

MITKO@WEBPIGMENT.COM

WHOAMI?

• WordPressDevelopersince2010

• FounderofWebpigment

• PluginAuthor

• WordCamp Traveler

WHATAREWEGOINGTOTALKABOUTTODAY

• WhatisReact

• WhatdoesitmeanforawebsitetorunonReact

• HowtoimplementreactwithWordPressAPI

• OryoucangoandlistentoAleksandar Pasku andhistalkaboutStorytelling:Theartofcommunication(lang:SR)atAMPHITHEATER2

REACT.JS

• Javascript libraryforbuildinginterfaces.

WHATDOESITMEANFORAWORDPRESSWEBSITETORUNONREACT?

• Bespoke!Bespoke!Bespokeeverywhere!

THEBEGINNING

• FewtutorialsaboutReact.js andRedux

• WordPressAPI

THEAPPROACH

• React.js andindex.html inseparatedomainforretrievingdata.

• WordPressAPI+ACFProFlexiblefieldforbuildingthepagescontent.

THECONFIGURATION

• Domainforassets

• DomainforAPIrequests

• Domainfortheindex.html (www)

• .htaccess maskingofthedomains

THEIMPLEMENTATION

• Createdallflexiblecontentblocks

• ConnectorclassbetweenReact.js classandWPRESTAPIresponsetoprocessthelayout

• Buildtheelements

THEOPTIMIZATION

• <picture>

• Cutting.classand#idnames

• CDN

• Optimizedimagesfordifferentdevices

• RemovedallunnecessarydatafromtheJSONresponse

THECHALLENGE

• Theloadinganimation

• Formsandvalidation(nonce)throughtheCDN

• SEO– webcrawlers

THEFRUITSOFOURLABOR

THANKYOU

• Mitko Kochkovski

• @m1tk00

• mitko@webpigment.com