+ All Categories
Home > Documents > Building websites using React.js and WordPress API€¦ · Bespoke everywhere! THE BEGINNING •...

Building websites using React.js and WordPress API€¦ · Bespoke everywhere! THE BEGINNING •...

Date post: 21-May-2020
Category:

Documents
Upload: others
View: 19 times
Download: 0 times
Download Report this document
Share this document with a friend
19
BUILDING WEBSITES USING REACT.JS AND WORDPRESS API MITKO KOCHKOVSKI @M1TK00 [email protected]
Transcript
Page 1: 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]

Page 2: 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

WHOAMI?

• WordPressDevelopersince2010.

• FounderofWebpigment.

• PluginAuthor.

• WordCamp Traveler.

• Father,HusbandandDoglover.

Page 3: 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

WHATAREWEGOINGTOTALKABOUTTODAY

• WhatisReact?

• WhatdoesitmeanforawebsitetorunonReact?

• HowtoimplementReact.js withtheWordPressAPI?

• OryoucangoandlistentoJodieandhertalkaboutBuildingSuccessfulClientRelationshipsinaDigitalAge

Page 4: 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
Page 5: 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
Page 6: 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

REACT.JS

• JavaScriptlibraryforbuildinginterfaces.

Page 7: 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

WHATDOESITMEANFORAWORDPRESSWEBSITETORUNONREACT?

• Bespoke!Bespoke!Bespokeeverywhere!

Page 8: 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

THEBEGINNING

• FewtutorialsaboutReact.js andRedux

• WordPressAPI

Page 9: 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

THEAPPROACH

• React.js andindex.html inseparatedomainforretrievingdata.

• WordPressAPI+ACFProFlexiblefieldforbuildingthepagescontent.

Page 10: 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
Page 11: 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

THECONFIGURATION

• Domainforassets

• Domainforbackend

• DomainforAPIrequests

• Domainfortheindex.html (www)

• .htaccess maskingofthedomains

Page 12: 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

THEIMPLEMENTATION

• Createdallflexiblecontentblocks

• ConnectorclassbetweenReact.js classandWPRESTAPIresponsetoprocessthelayout

• Buildtheelements

Page 13: 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
Page 14: 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

THEOPTIMIZATION

• <picture>

• Optimizedimagesfordifferentdevices

• Cutting.classand#idnames

• CDN

• RemovedallunnecessarydatafromtheJSONresponse

Page 15: 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

THECHALLENGE

• Theloadinganimation

• Formsandvalidation(nonce)throughtheCDN

• SEO– webcrawlers

Page 16: 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

THEFRUITSOFOURLABOR

Page 17: 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

FUTUREFUNCTIONALITIES

• Offlineaccesstothewebsite.

• Transferringtheimagesasencodeddata.

• Opensourceit.

Page 18: 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
Page 19: 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

THANKYOU

• Mitko Kochkovski

• @m1tk00&@webpigment

• [email protected]


Recommended
An Intro to the WordPress JSON API

An Intro to the WordPress JSON API

Technology

React.js Training

React.js Training

Documents

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

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

Documents

Extending the WordPress REST API - Josh Pollock

Extending the WordPress REST API - Josh Pollock

Internet

Amazon API Gateway + WordPress

Amazon API Gateway + WordPress

Engineering

WordPress Standardized Loop API

WordPress Standardized Loop API

Documents

WordPress REST API - What, How and Why?

WordPress REST API - What, How and Why?

Internet

Social networks API + WordPress

Social networks API + WordPress

Documents

React.js+Redux Workshops

React.js+Redux Workshops

Technology

Webinar: AngularJS and the WordPress REST API

Webinar: AngularJS and the WordPress REST API

Technology

Intro the WordPress REST API by tomhermans

Intro the WordPress REST API by tomhermans

Technology

WordPress REST API hacking

WordPress REST API hacking

Technology

Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The WordPress REST API

Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The WordPress REST API

Internet

Introduction to WordPress REST API

Introduction to WordPress REST API

Technology

Mobprogramming on React.js

Mobprogramming on React.js

Technology

Warungeo Gunung Api – Just another WordPress site

Warungeo Gunung Api – Just another WordPress site

Documents

Centralizing News through WordPress REST API

Centralizing News through WordPress REST API

Education

p1 · — Pure NodeJS+EJS vs NodeJS+React.js Basic Command lines in React.js CLI - New React.js Project Review Project Structure - ES2016 (Javascript for React.js) — JSX and Virtual—DOM

p1 · — Pure NodeJS+EJS vs NodeJS+React.js Basic Command lines in React.js CLI - New React.js Project Review Project Structure - ES2016 (Javascript for React.js) — JSX and Virtual—DOM

Documents