Download as PDF, PPTX
![Routes & Endpoints
[{
"code": "user_not_filled",
"message": "Username required",
"data": { "status": 400 }
}]
15](https://image.slidesharecdn.com/reactwithwordpress-190622121817/75/React-with-WordPress-Headless-CMS-15-2048.jpg)
![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](https://image.slidesharecdn.com/reactwithwordpress-190622121817/75/React-with-WordPress-Headless-CMS-17-2048.jpg)
More Related Content
Similar to React with WordPress : Headless CMS
More from Imran Sayed
React with WordPress : Headless CMS
- 1. React with WordPress ImranSayed @imranhsayed
- 2. Why use Reactfor 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.
- 4. REST ( REpresentationalState 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.
- 6. What is RESTAPI? ◈ 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 aHeadless 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 WordPressREST 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.
- 10. Routes & Endpoints register_rest_route('wp/v2/ns, '/post/create', array( 'methods' => 'POST', 'callback' => 'endpoint_handler' ), ) ); 10
- 11. Routes & Endpoints functionendpoint_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
- 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 : pathvariable ( regex ) /(?P<id>[d]+) . Here ( [d]+ means any numerical char atleast once
- 18. Endpoints ◈ Endpoints arefunctions 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 routeis 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.
- 21.
- 22. 4. JWT 22 @imranhsayed JSON WEB TOKEN( https://jwt.io/ )
- 24.
- 25. POST: /login { username:‘imran’ password: ‘xyz }’
- 26. POST: /login { username:‘imran’ password: ‘xyz }’
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. POST: /createPost Validation: Successful {post: postdata }
- 33.
- 34. React with WordPressTutorials https://youtu.be/m2uoYzUlBsg MeetUp Photo Gallery Git Repo 34 https://github.com/imranhsayed/react-with-wordpress https://www.meetup.com/PuneJSCamp/events/261573846/
- 35.