Connecting React.js with Headless WordPress Rest API
- January 10, 2024
- Posted by: MainInstructor
- Category: Go JavaScript React
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704876588_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Connecting React.js with Headless WordPress Rest API
Hey guys welcome back to this series in this video I’ll be showing you how to connect your headless WordPress back-end to your react application so to get started we’re just gonna go ahead and create these CLI application with react if you go to Facebook github io / react
Slash stock slash installation dot HTML and this will be in the description down below you can just quickly create a reactor so what I’m going to do is open up my terminal and I’m already in the location where my current WordPress back-end is at the headless blog and I’m
Gonna go ahead and create this react now if you don’t already have the create react app you’re going to need to install that globally and any time you install it globally on a Mac you need to have cito permission so do sudo npm install of sg3 react now I already
Have this so it shouldn’t actually do much I’m just gonna check and make sure it’s all up-to-date for me but for you it should install this program okay so now we’re going to use the create and yeah app and we’re gonna put the name of
Our app and we’re just going to call it headless react man this will just take a minute so I’ll see you when this is done okay so now if we take a look in our folder where our new app has been created right here what we’re going to
Do now is we’re gonna take this this is our wordpress site we’re actually going to rename this and we’re gonna rename it to admin and we’re gonna put it within our app that way it’s all in one file and it’s easy to manage and so now that
We actually change the source of the WordPress file we have to go into our our server and change the file location where it’s being hosted at because right now it doesn’t know where it’s at might ask you a password and preferences document root and you’re gonna go into
Your app and click the admin folder select ok start server ok and then just refresh your admin back-end make sure it’s not working fine it is we’re good to go ok so now what we’re going to do is we’re actually start the application so we’re going to CD headless or react and
We’re going to do NPM start and we should be up and running there we go and then it even gives you a link to check your phone or some other device that’s not directly on a computer which is kind of cool I’m so anyways we’re
Going to go ahead and open up our code editor I’m using Visual Studio code once again so the first thing we’re gonna do is we’re actually just going to go right into the app KS folder so I’m just gonna clear out all of this and you know put
The projects just some simple markup make sure that give is closed and save that okay and if we open up eternal it says compile the warning logos never used I’ll pass that we imported it but we don’t actually need that anymore and what I’m gonna do I’m actually gonna end
It out of the terminal and close out of this and run that same command in my text editor terminal just so it’s easier to see and so while that’s starting up we’ll go ahead and get started with pulling our data so the first thing we’re gonna do is we’re going to create
A constructor which basically runs as the first thing when this app is created on this URL or this page so constructor and we have to call super whenever we create our constructor and we’re gonna say this we’re going to set the state make sure that’s an object and we’re
Gonna set projects to be an empty array okay so we save this and we inspect oh I spoke instructor wrong okay and should recompile and what you want to do is if you don’t already have the react extension for google chrome go and download that from the google google
Chrome store and so if you look we now have this projects in our state okay so the next thing when you need to do is we need to set a function that runs whenever the component mounts or whenever it gets started so we’ll go ahead and put that right after our
Constructor will say component did mount and we’re gonna say we’re gonna set a variable let say let projects URL equals two and this is going to be the json data that we’re going to be pulling from wordpress and it’s gonna be point we want to pull only our projects in this
Case so we’re gonna go WP – json / WP / b – slash projects now we’re just gonna copy this link I’ve entered it in here to make sure that the data was valid and that was the right link so I’m just gonna paste that right in there and now
What we’re gonna do is we are going to use a fetch function which is some I believe it’s es6 which works wonderful so this is basically saying we’re gonna get all the data here mmm so that’s how we’re gonna do it so fetch and projects URL and so once you fetch
It then which is a promise we’re gonna response set that response dot okay son and what this does is it parses the data that comes from here and it parses it into JSON data that way we can read it a lot easier it’s the only way we’re going
To be able to read it here and then how could we do that we’re gonna set the response arrow function and we’re gonna say this dot set state so we’re gonna set a new state and we’re gonna say we’re gonna suck at projects equal to the response and that’s all you
Got it here so now if we save that and it should recompile and we look we can see our projects are now in our state in our app so good now what we have to do is basically render them on to the page so to do that we’re going to go into our
Render method which comes with the startup create react app and we’re gonna say we’re create another variable we’ll say let projects equal to this dot state projects and now we’re going to use a map function and so what this does is it essentially is a for loop but using es6
Which actually is a lot faster and a lot more efficient and it’s a little bit more readable – in my humble opinion so we’re say dot map and parentheses parentheses project index and so this basically is for every item in projects we’re going to call it project and then
The the key or the place we are at and they raised is going to be referred to as the index okay so now we’re gonna create an arrow function and we are going to return some GSX or JavaScript HTML or XML I suppose a div and we’re
Gonna set the key equal to the index I’m very important it’ll give you a warning if you don’t put this key but it basically is a way for react to know where you’re at in the loop so inside of this div where I’ve put an image and
We’re going to set the image equals to if we look over here we want to set the the image of each project and we want to go and to the better feature image media details sizes medium source URL okay so we’re gonna do project stop better feature
Image dot media details op sizes medium dot source URL okay and we’re gonna put the alt tag it’s very important in react to put alt tags to all your images it gives you a little warning if you don’t it’s good for SEO and just overall good
To have alt tags especially for you know people who might not be able to see they they actually rely on the alt tags in the images so that helps a lot so in the alt tag I say project dot better featured image dot alt text now if we look on the right
We actually don’t have any alt text but if we go into our projects and I actually created another project in here just to test things out but if we go into our first one that we created and we click on the featured image we can
Give it an alt text so we’ll just say lab dad fro logo and set your image update that so that’s a alt text and now we’re just gonna close the image tag and well then just close this div save it and see if it works okay so it did work
I can tell you that right now it did create the projects variable but we’re not actually rendering it on the page so what we’re gonna do is right after projects down here we’re going to say projects just like that and there we go we have the two featured
Images of our two projects in here I set them both to the same one and now if you right inspect this element you’ll see the alt is webdev profession logo okay so that’s the basics of how to do it let’s go ahead and just put in some more
Of the data that we’ve created in the WordPress so I’m just gonna paste these lines here and this just basically gets the title we go into the project let me show you that’s that so for the title we’re going to project title so project title dot rendered and and then for the
Stack we go into project ACF which is advanced custom fields and then we go into stack so for this new one the test there isn’t a stack there and then we do that they created render that as well so go ahead and save that and it’ll
Recompile and we should see all of that information there we go so that is how you can take your data from your WordPress headless WordPress API and use it in your react application I hope you guys enjoyed this video let me know if you have any questions or comments down
Below and I’ll see you guys in the next video goodbye
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Thanks a lot for these videos! I know I'm a little late to the idea of a headless CMS. I'm trying to understand if it's posible to make a pure html+css+javascript frontend site (no js framework) using headless WordPress. What's your opinion?
This was good, thank you for posting. Keep posting more of whatever new and exciting you see. blessings and love..!!
How to deploy the project?
Does google see the content I pull from WordPress for SEO? So basically do JSON data get seen when you display it on the frontend?
Does this help with SEO if my React app is CSR instead SSR?
Thanks. How does one display content.rendered and keep formatting rather than displaying html tags as text?
Amazing explanation !! Thank you
Could you sell these as themes?
holy shit….
Sounds great, but if u need to authenticate to the api (wp-json)??? How can you pass the user and password?
This was a great intro for headless React. Thank you.
Hotel WordPress Theme is the best hotel, hostel, resort, apartment presentation WordPress theme. With its beautiful design and high coding quality, this theme can showcase your unique accommodations to the world and attract more visitors to your website https://visualmodo.com/theme/hotel-wordpress-theme/
🏨🛎️🛌⛵️🏖️
how do we loop and iterate through a new row. Say we only want 3 columns/items per row, and we want to create new row and columns if current row has more then 3 columns. Does that make sense?
This is the best wp + vue tutorial I've ever seen. Thank you a lot! Could you please make some more tuts in this theme? For example: "how to add plugins wp+vue" or "how to set pagination wp+vue" etc. Continue to help people and it will return to you much bigger! THNKS
Plz give us a CRUD App based on WP with REACT. Thanx.
Great video keep it up, one question please. you mentioned that its better to front end users not to visit your back end ( sub domain ) site, but when you render your images on the second video, in the front end it does show the subdomain Url with you inspect element. Is it ok ? is there a way to overcome this? what are best practices cheers bro 🙂
Hi there, a kind request.
Please make brief video on React native with WordPress as a Backend.
fetch is not ES6, it's from the web api.
Great video thanks. I didn't think you could do it in 13 minutes! One comment is I see you used plugins like ACF and better featured image. I was frustrated and wanted to grab the original featured image from WordPress, otherwise what's the point. So here is the solution, you need to add ?_embed to the end of projectsURL =" I struggled to encode the colon, here is that solution too:
<img src={project._embedded['wp:featuredmedia']['0'].media_details.sizes.full.source_url}
alt={project._embedded['wp:featuredmedia']['0'].alt_text}
/>
Hi, how would you handle the WP comments section. Is there a way to add comments directly from your React website ?
Good video but one notable problem is that you should not use the index as a key, the index can change, a better key would be the node/project key
Okay but the question is… what are the real advantages to do that…? I mean, the front-end and the back-end are separated, that's a good thing… but if this will be the future of WordPress development… there won't be any WordPress theme anymore? I mean… there won't be any WordPress theme written in PHP by using the WordPress functions, since you can create your front-end in any language you like and grab the data from the WordPress REST API.
Yes, i have some doubts.
Thanks for this great video!
How would you go about hosting this? Is WP and React hosted on two different domains? Would the React site update whenever knew content is added to the WP? Thank you for the great content.
Hello, thaks for your video, very clear.
i have a qestion, how do i get the content without html tags.
i was using this {projects.content.rendered}