Building websites using React.js and WordPress API€¦ · Bespoke everywhere! THE BEGINNING • Few tutorials about React.js and Redux • WordPress API. THE APPROACH • React.js

BUILDINGWEBSITESUSINGREACT.JS ANDWORDPRESS

APIMITKO KOCHKOVSKI

@M1TK00

[email protected]

WHOAMI?

• WordPressDevelopersince2010.

• FounderofWebpigment.

• PluginAuthor.

• WordCamp Traveler.

• Father,HusbandandDoglover.

WHATAREWEGOINGTOTALKABOUTTODAY

• WhatisReact?

• WhatdoesitmeanforawebsitetorunonReact?

• HowtoimplementReact.js withtheWordPressAPI?

• OryoucangoandlistentoJodieandhertalkaboutBuildingSuccessfulClientRelationshipsinaDigitalAge

REACT.JS

• JavaScriptlibraryforbuildinginterfaces.

WHATDOESITMEANFORAWORDPRESSWEBSITETORUNONREACT?

• Bespoke!Bespoke!Bespokeeverywhere!

THEBEGINNING

• FewtutorialsaboutReact.js andRedux

• WordPressAPI

THEAPPROACH

• React.js andindex.html inseparatedomainforretrievingdata.

• WordPressAPI+ACFProFlexiblefieldforbuildingthepagescontent.

THECONFIGURATION

• Domainforassets

• Domainforbackend

• DomainforAPIrequests

• Domainfortheindex.html (www)

• .htaccess maskingofthedomains

THEIMPLEMENTATION

• Createdallflexiblecontentblocks

• ConnectorclassbetweenReact.js classandWPRESTAPIresponsetoprocessthelayout

• Buildtheelements

THEOPTIMIZATION

• <picture>

• Optimizedimagesfordifferentdevices

• Cutting.classand#idnames

• CDN

• RemovedallunnecessarydatafromtheJSONresponse

THECHALLENGE

• Theloadinganimation

• Formsandvalidation(nonce)throughtheCDN

• SEO– webcrawlers

THEFRUITSOFOURLABOR

FUTUREFUNCTIONALITIES

• Offlineaccesstothewebsite.

• Transferringtheimagesasencodeddata.

• Opensourceit.

THANKYOU

• Mitko Kochkovski

• @m1tk00&@webpigment

• [email protected]