+ All Categories
Home > Documents > Building websites using React.js and WordPress API€¦ · • Connector class between React.js...

Building websites using React.js and WordPress API€¦ · • Connector class between React.js...

Date post: 03-Oct-2020
Category:

Documents
Upload: others
View: 4 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€¦ · • Connector class between React.js class and WP REST API response to process the layout • Build the elements THE OPTIMIZATION

BUILDINGWEBSITESUSINGREACT.JS ANDWORDPRESS

APIMITKO KOCHKOVSKI

@M1TK00

[email protected]

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

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

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

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

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

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

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

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

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

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

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

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

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

THANKYOU

• Mitko Kochkovski

• @m1tk00&@webpigment

• [email protected]


Recommended
179669026 API Training Class Ppt

179669026 API Training Class Ppt

Documents

API Database Class

API Database Class

Documents

Developing SLDS Apps with React.js

Developing SLDS Apps with React.js

Software

API Spec. 6A Material Class Explanation of Material Class ...

API Spec. 6A Material Class Explanation of Material Class ...

Documents

React.js - The Dawn of Virtual DOM

React.js - The Dawn of Virtual DOM

Software

Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 mitko@webpigment.com

Building websites using React.js and WordPress API · building websites using react.js and wordpress api mitko kochkovski @m1tk00 [email protected]

Documents

React.JS Conf & F8

React.JS Conf & F8

Software

How to use React.js

How to use React.js

Software

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

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

Documents

React.js at Cortex

React.js at Cortex

Technology

You Got React.js in My PHP

You Got React.js in My PHP

Technology

React.js in real world apps.

React.js in real world apps.

Software

Mobprogramming on React.js

Mobprogramming on React.js

Technology

React.js or why DOM finally makes sense

React.js or why DOM finally makes sense

Technology

API 1104 Class Study

API 1104 Class Study

Documents

React.js+Redux Workshops

React.js+Redux Workshops

Technology

Ý w React - CodeWinds · React.js API - render string // can render to string on server const str = React.renderToString(); // alternatively if not using

Ý w React - CodeWinds · React.js API - render string // can render to string on server const str = React.renderToString(); // alternatively if not using

Documents

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