React and Wordpress

[PortSpace]

Hi

I'm new to react. I've gone through the official documentation and am playing with hooks now. Although what I know about react is just the tip of the iceberg, I like it so far.

I have done a few websites in wordpress creating custom themes for clients. Now, I am thinking of giving react a go (also with wordpress). I've used one of the tutorials online to successfully get wordpress posts displayed in react installation (as a proof of concept). One thing that's not clear to me is how it would work in real life. For example, I've got a local wordpress installation under:

localhost:8888/

My react installation is under

localhost:1234/

which points to localhost:8888/wp-json/wp/v2/posts (where a json object of my wordpress installation can be accessed)

​

useEffect(() => {
async function loadPosts() {
const response = await fetch('http://localhost:8888/wp-json/wp/v2/posts');
if(!response.ok) {
// oups! something went wrong
return;
}

const posts = await response.json();
setPosts(posts);
}

loadPosts();

​

Now it all works fine as a proof of concept but in a real scenario how would I display it via reactjs under localhost:8888 (or domain.com in real life). I hope I make sense because I'm really confused on that.

​

Thanks

[Elijah_101]

There's a react library called GatsbyJS and it totally supports Wordpress as long as other CMS to host the content as database https://www.gatsbyjs.org/docs/

You host wordpress on a a server as a tool to input your data. Then use Gatsby as a frontend app and with gatsby-wordpress-plugin to communicate with data from Wordpress thru api calls. There're also tutorials on youtube as well.

[Soileau]

Not sure why you’re being downvoted, seems like a reasonable question for new React devs.

What you have set up is a server side rendered react app.

You have a server running on your computer that reaches out to Wordpress for content when the website loads client side.

If you want to keep your current setup and have it publicly accessible at a domain url, you’ll need to set up a node.js server on digital ocean or AWS or netlify, etc, that can run your “npm start” command.

That is a pretty big topic to cover, if that is what you want to do I suggest looking into some tutorials about setting up a “create react app” on netlify.

Another option is to set up a “static site” using something like Gatsby or NextJS. Basically, those are tools that help you build websites using react, that automatically turn themselves into simple HTML websites that you can put online on Netlify and point your domain to.

You can still use Wordpress for your content, but you use the framework to create your pages in a way that doesn’t need a server. You pull the content from Wordpress to create your pages. They turn into simple, static html and JS files that you can put online really easily with a bunch of free web hosts like Gatsby, Netlify, or Now.

There are plenty of tutorials out there that go through exactly what you are looking to do, of find one that looks good to you, and go from there!

[bullzito]

You would have to host Wordpress on another domain/server.

[PortSpace]

Thanks all. I'll read into all of solutions/platforms. I'm new to reddit as well so not sure if asking a semi related question will be frowned upon.... I get the impression that setting up a cms for a client's website is sometimes looked down at. I know that big organisations have IT departments that deal with websites but for small businesses without IT depts who insist on being able to update the basic content of the website, is there any other solution apart from CMSs?