building websites using react.js and wordpress api€¦ · • connector class between react.js...
TRANSCRIPT
![Page 2: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/2.jpg)
WHOAMI?
• WordPressDevelopersince2010.
• FounderofWebpigment.
• PluginAuthor.
• WordCamp Traveler.
• Father,HusbandandDoglover.
![Page 3: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/3.jpg)
WHATAREWEGOINGTOTALKABOUTTODAY
• WhatisReact?
• WhatdoesitmeanforawebsitetorunonReact?
• HowtoimplementReact.js withtheWordPressAPI?
• OryoucangoandlistentoJodieandhertalkaboutBuildingSuccessfulClientRelationshipsinaDigitalAge
![Page 4: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/4.jpg)
![Page 5: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/5.jpg)
![Page 6: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/6.jpg)
REACT.JS
• JavaScriptlibraryforbuildinginterfaces.
![Page 7: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/7.jpg)
WHATDOESITMEANFORAWORDPRESSWEBSITETORUNONREACT?
• Bespoke!Bespoke!Bespokeeverywhere!
![Page 8: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/8.jpg)
THEBEGINNING
• FewtutorialsaboutReact.js andRedux
• WordPressAPI
![Page 9: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/9.jpg)
THEAPPROACH
• React.js andindex.html inseparatedomainforretrievingdata.
• WordPressAPI+ACFProFlexiblefieldforbuildingthepagescontent.
![Page 10: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/10.jpg)
![Page 11: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/11.jpg)
THECONFIGURATION
• Domainforassets
• Domainforbackend
• DomainforAPIrequests
• Domainfortheindex.html (www)
• .htaccess maskingofthedomains
![Page 12: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/12.jpg)
THEIMPLEMENTATION
• Createdallflexiblecontentblocks
• ConnectorclassbetweenReact.js classandWPRESTAPIresponsetoprocessthelayout
• Buildtheelements
![Page 13: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/13.jpg)
![Page 14: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/14.jpg)
THEOPTIMIZATION
• <picture>
• Optimizedimagesfordifferentdevices
• Cutting.classand#idnames
• CDN
• RemovedallunnecessarydatafromtheJSONresponse
![Page 15: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/15.jpg)
THECHALLENGE
• Theloadinganimation
• Formsandvalidation(nonce)throughtheCDN
• SEO– webcrawlers
![Page 16: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/16.jpg)
THEFRUITSOFOURLABOR
![Page 17: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/17.jpg)
FUTUREFUNCTIONALITIES
• Offlineaccesstothewebsite.
• Transferringtheimagesasencodeddata.
• Opensourceit.
![Page 18: Building websites using React.js and WordPress API€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION](https://reader034.vdocuments.us/reader034/viewer/2022051606/60261ff4e0783b6fc7233912/html5/thumbnails/18.jpg)