I’ve seen a number of people asking this question, in a few different ways:
Coming from a PHP background, how can I combine my backend with React?
Will React run if my app is hosted on an Apache/MySQL/PHP stack?
The short answer is:
You do not need a Node.js backend to use React.
Read on for how to fetch data, deal with routing, and server-side rendering without Node.js.
Frontend vs Backend
React is a frontend library, which runs in the browser. Like any other frontend library (jQuery, etc), it is happy to be served by any old webserver – Apache, NGINX – or any kind of backend – PHP, Rails, and so on.
Lest we lose track of how the Internet works, here’s a diagram to anchor the discussion:
React is unopinionated about how you fetch data, and so it doesn’t care what your backend is written in. It just needs data to display.
You can use any frontend library for fetching data – React doesn’t come with one. I like the
fetch function, which will eventually be standard but is supported by a polyfill in the meantime. It’s straightforward and has a clean API. SuperAgent is another good choice.
The official React tutorial has an example of fetching data. They use jQuery in that example but like I mentioned, you can use whatever.
They grab the data in the
componentDidMount function, which runs when the component first renders, then call
setState with the latest data, which will trigger a re-render. You don’t have to fetch from
componentDidMount, just somewhere you’re allowed to call
setState from (e.g. not the
It’s a good idea to keep the data up near the root of the component tree and pass it down to the components that need it. It’s easier to figure out where the data is being loaded when it’s centralized in only a few places, rather than scattered all over the app.
I said that React doesn’t care what your server is doing, which is true…
But if you add React Router to your project, and you want to use its
browserHistory feature, the server must serve up your
index.html page no matter which URL the user accesses. If you’re at that stage in your project, check out the React Router docs about configuring your server.
If you want to support server-side rendering (a.k.a. “isomorphic” rendering), whether to increase page load speed or to improve SEO, then React will actually be running on both the server and in the browser: once to render the page server-side, and then again in the browser after it downloads and displays the initial rendering.
Node.js for Development
Where you almost definitely need Node.js is in your frontend development environment. You’ll need it for running build tools (whether that’s Webpack or NPM or Grunt or Gulp), and maybe a local development server. Even if you want to skip all the build stuff, you still need Node and NPM.
Though if your backend is not Node.js, you’ll probably want the last step of your build to be “copy the built files to my server’s root directory.”
Alternatively, you could set up Webpack to serve your React app and then proxy all other requests to your real backend server (whether that’s local, or across the web somewhere).
So, in conclusion… can you use React with a PHP backend? Or with a Rails backend? Or any other kind of non-Node.js backend? Yes you can :)
If you’ve yet to try out React – if you’re still in the “information gathering” stage, waiting to take the leap… give it a shot right now with a simple build-free 2-minute setup!
And if you’ve started learning React but gotten bogged down and overwhelmed by the sheer size of the ecosystem, read my Timeline for Learing React and take it one step at a time.
I’m also working on a book! You can check that out here and sign up to hear when it’s ready.
For a step-by-step approach to learning React,
check out my book — grab 2 free sample chapters.