Build Modern Web Applications with React and WordPress

1. Build Modern Web Applications with React and
WordPress
Imran Sayed
@imranhsayed

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

3. WordPress REST API
@imranhsayed

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

5. 1.
WordPress REST API?
5
@imranhsayed

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

9. 2.
Endpoints & Routes
9
@imranhsayed

10. Routes & Endpoints
register_rest_route( 'wp/v2/ns, '/post/create',
array(
'methods' => 'POST',
'callback' =>
'endpoint_handler' ),
)
); 10

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

14. Routes & Endpoints
if ( empty( $username ) ) {
$error->add(
‘user_not_filled’,
"Username required",
array( 'status' => 400 )
);
return $error;
} 14

15. Routes & Endpoints
[{
"code": "user_not_filled",
"message": "Username required",
"data": { "status": 400 }
}]
15

16. Routes
http://example.com/wp-json/wp/v2/ns/posts/1
16
Base path of
API
Route
Namespaces
CustomCore
wp : vendor name i.e.WordPress
v2 : version 2 of the WordPress REST API
posts : resource path of the resource you are trying to access

17. Routes
http://example.com/wp-json/wp/v2/ns/posts/1
17
1 : path variable ( regex ) /(?P<id>[d]+) .
Here ( [d]+ means any numerical char atleast once

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

20. Routes
◈ GET
http://example.com/wp-json/wp/v2/ns/posts/
◈ POST
http://example.com/wp-json/wp/v2/ns/posts/
20

21. 3.
Create React Application
21
@imranhsayed

22. Demo and Exampleshttps://codeytek.com/wp-json/wp/v2/posts
https://github.com/imranhsayed/react-with-wordpress/blob/master/src/components/Home.js
https://react-with-wordpress.netlify.com/
22
@imranhsayed

23. Authorized Requests?
23
@imranhsayed

24. 4.
JWT
24
@imranhsayed
JSON WEB TOKEN ( https://jwt.io/ )

26. POST: /login

27. POST: /login
{ username: ‘imran’
password: ‘xyz }’

28. POST: /login
{ username: ‘imran’
password: ‘xyz }’

29. POST: /login

31. POST: /createPost
headers:

32. POST: /createPost
Verifies token

33. POST: /createPost
Validation: Successful

34. POST: /createPost
Validation: Successful
{ post: postdata }

35. “

36. Learn WordPresshttp://learn.rtcamp.com/
36
@imranhsayed

37. React with WordPress Tutorials
https://codeytek.com/course/headless-
wordpress-react-course/
MeetUp Photo Gallery
Git Repo
37
https://github.com/imranhsayed/react-with-wordpress
https://www.meetup.com/PuneJSCamp/events/261573846/

38. 38
THANKS!
@imranhsayed
@ Imran Sayed