Video Tutorials:
https://youtu.be/m2uoYzUlBsg
Git Repo:
https://github.com/imranhsayed/react-with-wordpress
Meet Up Gallery
https://www.meetup.com/PuneJSCamp/events/261573846/
React with WordPress : Headless CMS
How to use react for the front end and WordPress as backend.
2. Why use React for front end?
◈ React uses Virtual DOM.
◈ Easy to create mobile App using React
Native
◈ React is supported by Facebook( Reliable
large community of Developers )
◈ Large npm library available for React.
2
4. REST ( REpresentational State Transfer )
◈ Representational State of data object ( in
XML, JSON format ) available at the server.
API :
◈ A way of two systems to interact with each
other.
4
6. What is REST API?
◈ A way of accessing WordPress data in
representational state ( XML/JSON format )
via HTTP request.
◈ Perform CRUD operations on WordPress
database
◈ WordPress as a headless CMS.
6
7. What is a Headless CMS?
◈ A back-end only build, from the ground up,
as a content repository.
◈ Makes the content accessible via RESTFUL
API
◈ It does not have front end.
7
8. Why use WordPress REST API ?
◈ Create single page applications on top of
WordPress
◈ WP REST API unlocks the data, to create a
brand new interactive front-end experience
◈ Choose your favorite front end technology (
e.g. React, Vue etc )
8
11. Routes & Endpoints
function endpoint_handler( WP_REST_Request $request )
{
$response = array( data => ‘Some Data’ );
...do something…
return new WP_REST_Response( $response );
}
11
12. Routes & Endpoints
◈ The return value of your calleback is
automatically converted to JSON
return new WP_REST_Response( $response );
12
13. Routes & Endpoints
◈ You can also return a WP_Error instance
◈ This error information will be passed along to the
client along with a status code ( 500 by default )
13
18. Endpoints
◈ Endpoints are functions available through
the API, that perform CRUD Operations
◈ Perform certain functions like, taking some
number of parameters and return data to the
client.
18
19. Routes
◈ A route is the “name” you use to access
endpoints, used in the URL.
◈ One route can have multiple endpoints
associated with it ( like GET, POST, PUT
DELETE etc )
19