building websites using react.js and wordpress api · building websites using react.js and...
TRANSCRIPT
![Page 2: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/2.jpg)
WHOAMI?
• WordPressDevelopersince2010
• FounderofWebpigment
• PluginAuthor
• WordCamp Traveler
![Page 3: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/3.jpg)
WHATAREWEGOINGTOTALKABOUTTODAY
• WhatisReact
• WhatdoesitmeanforawebsitetorunonReact
• HowtoimplementreactwithWordPressAPI
• OryoucangoandlistentoAleksandar Pasku andhistalkaboutStorytelling:Theartofcommunication(lang:SR)atAMPHITHEATER2
![Page 4: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/4.jpg)
![Page 5: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/5.jpg)
![Page 6: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/6.jpg)
REACT.JS
• Javascript libraryforbuildinginterfaces.
![Page 7: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/7.jpg)
WHATDOESITMEANFORAWORDPRESSWEBSITETORUNONREACT?
• Bespoke!Bespoke!Bespokeeverywhere!
![Page 8: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/8.jpg)
THEBEGINNING
• FewtutorialsaboutReact.js andRedux
• WordPressAPI
![Page 9: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/9.jpg)
THEAPPROACH
• React.js andindex.html inseparatedomainforretrievingdata.
• WordPressAPI+ACFProFlexiblefieldforbuildingthepagescontent.
![Page 10: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/10.jpg)
![Page 11: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/11.jpg)
THECONFIGURATION
• Domainforassets
• DomainforAPIrequests
• Domainfortheindex.html (www)
• .htaccess maskingofthedomains
![Page 12: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/12.jpg)
THEIMPLEMENTATION
• Createdallflexiblecontentblocks
• ConnectorclassbetweenReact.js classandWPRESTAPIresponsetoprocessthelayout
• Buildtheelements
![Page 13: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/13.jpg)
![Page 14: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/14.jpg)
THEOPTIMIZATION
• <picture>
• Cutting.classand#idnames
• CDN
• Optimizedimagesfordifferentdevices
• RemovedallunnecessarydatafromtheJSONresponse
![Page 15: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/15.jpg)
THECHALLENGE
• Theloadinganimation
• Formsandvalidation(nonce)throughtheCDN
• SEO– webcrawlers
![Page 16: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/16.jpg)
THEFRUITSOFOURLABOR
![Page 17: Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com](https://reader036.vdocuments.mx/reader036/viewer/2022062505/5ee16463ad6a402d666c4aea/html5/thumbnails/17.jpg)