What is React?React is a javascript library used for building Single Page Applications(SPAs). It was developed by Facebook. We can build user-interfaces for modern web applications in a much easier and better way.
What is Wordpress?
Wordpress is a Content Management System (CMS). It helps us to build a website without the need to write all the code. So anyone can create a website without technical knowledge. We just need to provide the content we need to display and select the way we want to display our content and Wordpress will take care of the rest.
What is a Headless CMS?
It doesn’t mean that our CMS is missing the header section. It means that our CMS is decoupled from the front end. It is a back end only Content Management System. Wordpress also provides a REST API by which we can access all our contents and we can display it on any device. It doesn’t care about where the data is getting displayed. It just stores and delivers our data.
Can we use React with Wordpress?
Yes, for sure we can use React with Wordpress. With React we can focus primarily on how to display the data and we can get the data using the Wordpress REST API.
How do we do that ?
Follow the steps mentioned below to use Wordpress with React.
Setting up our Wordpress application
First we need to set up our Wordpress site since it is going to be our source of data for the frontend React application.
All the posts that we have created in our wordpress can be accessed with the help of this endpoint.
This will return all the posts that we have written in our Wordpress site in JSON format.
To get a particular post we can make use of this endpoint.
Where id is the post id that we want to retrieve. The same can be done for adding, updating posts by using POST method.
Setting up our React application
Next we need to set up our front end which is going to be React. For this we need to have Node.js installed in our system. Run the following command on your terminal.
Now our project folder is ready and we can start creating our react app. We can make use of the fetch API or a third party package called axios to make our React app talk to our Wordpress back end. Fetch is an inbuilt api that helps us make API calls. Axios has some advantages when compared to the fetch api. Lets see how we can do it with the help of axios.
React + Wordpress
The best place to make our api calls within a react component is in componentDidMount(). Because this life cycle method gets called only after the first render. Hence, it's the ideal place for making asynchronous calls.
axios.get('https://example.com/wp-json/wp/v2/posts')
.then(response => {
let posts = response.data
this.setState({ posts })
})
So, now we have got our data from Wordpress. Similarly, we can also make POST requests to our back end to add new posts. It's the same procedure as we did before.
Conclusion
So now we have our React application talking to our Wordpress back end. We can also add custom post types. By default Wordpress has only posts and pages, but with the help of plugins we can add our own custom post types. Thus we can customize our Wordpress back end like the way we want it to be. We can use any technology for the front end. We can even make our mobile application talk to our Wordpress back end.
No comments:
Post a Comment