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