What you will Learn
In this developer guide, you will learn about:
- Why your React app needs a backend to work with
- The functions of your backend framework's app in a full stack web app (that includes your React app as the frontend part of the stack)
- The functions of your React app as the frontend of your fullstack web project
- How the backend and your frontend (React) app work together as one whole web project that works seamlessly
Backends for React
As useful as the React frontend framework is, you may realize that, sooner or later, you will find yourself wondering: "What backend framework should I use with React?"
This question may stem from a place of concern as a Frontend Developer.
Why "concern"?
Because you know that your frontend (React) app:
- needs to be optimized, minified and obfuscated so that you can add it to the backend app. This is what is known as creating a "production build" (and is what the `npm run build` or `yarn build` commands are for.)
- may need to handle authentication (which lies within the domain of the backend framework in use.) This way, you can plan for whether you are handling authentication using JWT (JSON web tokens), sessions, etc.
- needs to be integrated into an existing backend app so that it runs as part of the backend app in production. This is because, in production, you should run both the frontend React app as part of the backend project/app.
So, what backends can you use with React?
The short answer is that you can use any backend. The more longer answer is... it depends on a number of factors.
These factors would include:
- Company Tech Stack: If you work with an established company, they probably already have a tech stack in place. As such, the backend (along with the database) as well as frontend framework should already be chosen for you.
In this case, all you need to do is ask the backend developers or Tech Lead what framework they are using for the backend.
If they have successfully used React alongside that backend framework before, you are in luck. Just ask them how they handled the integration process. Then, follow the same steps to integrate your React app with the existing backend.
But if this is the first time, then you may need to do some "googling" to see how others may have successfully-worked with both frameworks together. (In this guide, I will give you links to some quality articles that cover using React with each of the backends we will be covering here. So, relax.)
- Personal Preference: If you have worked with more than one backend framework before, you can choose which one to build your web backend with. ExpressJS or Django? Rails or NextJS? It will be up to you.
- Professional Development: You may have heard of a backend framework that you are itching to learn but had never really taken the time to learn.
Trying to learn and use a new backend web framework with your React app for the current web project could be a learning experience for you. You learn a new backend framework (and how to integrate it with React) and become a better Full Stack developer.
That comes in handy the next time you are looking for a job or talking to someone about your technical expertise and professional experience in the web development space. It will be a great experience overall, God willing.
There could be other factors, but it all comes down to: you need to have a backend so that your React app can run in it when you ship your app to production.
Separation of Concerns in Web Development
When building a full stack app, your backend and frontend apps should complement each other and not be substitutes.
So, what does your React/frontend app need to handle? And, what does your backend need to be responsible for?
Let's take a look at that before we continue.
What Does React Do?
So, what is your React app responsible for within the larger scheme of full stack web development?
Your frontend (React) app should:
- Render the UI of your App: These are the pages that a user sees when they visit your website online. These pages are known in React lingo as "components".
Your React app will write the JSX (aka "extended HTML/JavaScript") and CSS to properly and stylishly-render the components.
- Make API Calls to your Backend: It is not practical to store your app and user data in the frontend. That's a web security disaster waiting to happen.
So, there needs to be an API backend somewhere that your React app makes `CREATE` (i.e `POST`), `READ` (i.e `GET`), `UPDATE` (either `PUT` or `PATCH`) and `DELETE` calls to get, set and update the data to render in your React components as their state.
HTTP libraries used to make API calls from your React app to your backend API servers include Fetch API and axios-http.
- Take User Input: Whether your user posts a comments, clicks a link, likes a photo or saves a product to his/her shopping cart, your React app will handle that user input accordingly. This input handling could be either by:
- triggering an event handler function
- making an API call to the backend ;or
- printing a confirmation or error message, and so on.
- Handling Routing between Components: In React, your pages are called "components". And, since it is not practical to render the whole UI in one go, you need to configure routing among the components so that users can view one main component at a time.
This routing is typically done using a React package like the `react-router-dom` library.
- Frontend State Management: While you don't save data in your frontend app, you can store and manage it within your app during the lifetime of the HTTP session.
This app-wide state management is done using built-in React hooks such as `useState()`, `createContext()` and `useContext()` when working with component-level state or simple app-wide state.
For more complex state management needs, you can use state managers like the `Context API`, `Redux Toolkit` or `Zustand`. These come with their own state management APIs and hooks to properly manage your React app's global component state.
There are other functions of your React apps, but these are the main ones.
What Does a Backend Web Framework Do?
So, what about the web app's backend? What is its job as you build a full stack web project?
There are a few things that your backend does. These include:
- Database Management: If your website contains more than just blurbs of static text or images, you likely need a database to store (and manage) the dynamic data you need for your website to function.
Setting up a database and performing CRUD operations against it to get, add, update or delete data is done in your backend app. This is irrespective of whether you are using a SQL database (like PostgrSQL, MariaDB or MySQL) or the NoSQL kind (like MongoDB or Redis).
Most backend web frameworks used libraries (available in that framework's language) to query the database.
- API Development and Management: Since your frontend (React) app won't have direct access to your database, the only way the React app can interact with your database is via an API endpoint.
This is done in the backend to support all necessary CRUD operations over HTTP through its HttpRequest and HttpResponse cycles.
Depending on which backend you use, there could be a number of packages/libraries (or sub-frameworks) that are available to help you easily create and manage your APIs.
You could also, conceivably, create fully-functioning APIs using nothing but the framework without any third-party tools, frameworks or packages. But that would depend on your experience and expertise with that framework and web development in general.
- Authentication: If your website also engages users (through comments, user profiles, etc.), then you would need to provided a system of authentication (to identify users, via logins, for example) and authorization/permissions (to determine what an authenticated user can/cannot do on the website).
Since it involves user data being saved to the database, authentication is typically implemented in the backend (where there is direct access to make CRUD operations against the database). Depending on how you set it up, your authentication system may support username/password or token (such as JWT) authentication.
- Run/Render the Frontend App in Production: During development, your backend runs on one server and port while your frontend/React app runs another server and port.
In production, both your backend and frontend/React apps run on the (backend) server and port.
You can test this in your development environment by taking the assets generated after running the `npm run build` (or `yarn build`, if you are using Vite instead of CRA) command and integrating it with the backend app. Then, start the backend web server and see how well your React app runs as part of the backend.
Depending on how you use your backend, it may also do server-side rendering of certain pages on the sites, and so on.
How it all Works Together
When you have a separate backend app and a separate frontend app that are supposed to work as one unit when deployed to production, how does it really work (in production)?
Remember that:
- Your database and API exist on the backend app
- Your frontend/React app serves the UI (pages) of your app
So, how does both your Backend and Frontend apps work together seamlessly as one app in production?
Well, here is how ...
- A user visits your website, say at example.com/blog/ . The `/blog/` page is where the React/frontend app is served. It is the UI of your web app.
- The React app makes a `GET` call over HTTP to your API backend server (at, for example, the `/api/posts/` endpoint) to get a list of the blog posts published.
- The backend API server queries the database and (if there are matching results) sends the response over HTTP to the client/React app.
- The React app renders the list of blog posts receivd from the call to the backend API or the error message returned if there were no matching blog posts.
- The user clicks on a blog post he/she wants to read.
- The React app opens up the blog post on a new page, say, `example.com/blog/backends-for-reactjs/`.
- The React app calls the API backend to get the data for the post matching 'backends-for-reactjs' URL.
- The matching blog post is sent to the React frontend app to be rendered for this user.
- The user has something to say about the topic of this blog post and uses the comment form to do so.
- The user hits the "Submit Comment" button to, well, submit the comment.
- The React app takes the comment posted, makes a `POST` HTTP call to the backend API endpoint (at, for example, `/api/comments/` ) to submit the new comment posted by the user.
- The backend app takes the submitted comment and saves it to the database.
- The next time somebody (or the same user) opens the example.com/blog/backends-for-reactjs/ page, the comment is rendered alongside the data for the "Backends for ReactJS" blog post.
... and the show continues like this.
As you can see from the above breakdown of steps, the backend and frontend React apps work seamlessly together as one app. Your user does not need to know what is going on behind the scenes. It should all "just work."
Web Backend Options to use with your React App
Now, that you know what your backend is responsible for, what your React app handles and how both work together to create a smooth web browsing experience for your user, let us take a look at some of the popular options you can use as a backend to use alongside your React app.
You will find links to the official documentation as well as tutorials (for each backend web framework we cover) to help you learn how to integrate React with those web backends.
a: ExpressJS
This is a NodeJS-based JavaScript framework for backend web development. Like React, it uses JavaScript as its language. As such, you can read and make sense of ExpressJS code if you are familiar with JavaScript and/or React.
There are many [NPM packages](https://npmjs.com) that you can install and use in the backend app to implement:
- Authentication: both username/password session authentication as well as JWT using the `brcyptjs` and `jsonwebtoken` packages. Other similar-functioning packages can be found on https://npmjs.com.
ExpressJS Tutorials and Documentation
ExpressJS Ecosystem Libraries and Frameworks
Active ExpressJS Communities
b: Django
This is a backend web development framework that is based on the Python programming language. It is probably the most mature Python web framework out there.
It has been used by news, mapping, ecommerce and social network platforms. As a result, it has been tested, trusted and proven to work in a variety of business applications.
Django is known for:
- Being Opinionated: That is, there is a structured approach to how you organize your apps and the various parts of an app like its models, URLs/routes, views/controlllers, templates, static assets, tests, and so on.
You can either build on this structure or try to change it to suit your web project's particular needs (if your Python and Django expertise has reached that level.)
- Batteries Included: That is, Django comes with a lot of prebuilt apps/packages that you can just "plug-and-play" into your backend web project.
These "contrib" apps (as they are called in the Django world) include:
- `django.contrib.auth`: This is the authentication app of Django. It handles both authentication and authorization (permissions).
The `django.contrib.auth` package also supports customization so you can roll your own authentication system (which I have done myself) without having to write everything from scratch.
- `django.contrib.admin`: This is Django's `AdminSite`.
It is one of the most useful of the built-in apps and is as simply "plug-and-play" as it gets.
Just add in the models for any of the Django apps and you have a fully-functioning admin dashboard for full CRUD capability (to add, remove, update and delete model instances/objects.)
- `django.contrib.gis`: Commonly known as GeoDjango, this app is useful for creating mapping applications.
It supports a variety of shapefile formats, GeoJSON and usage with either PostGIS or other databases.
- `django.contrib.staticfiles`: For managing your static assets (CSS, JS, images, etc.) across your Django project.
I have personally used Django (and many of its dependent packages and frameworks) for quite a few of my own backend projects. And, the rich repository of
PyPi packages is just heart-warming, to say the least.
Django Tutorials and Documentation
There is a rich store of Django-related tutorials, documentation and similar resources online.
Some of the very useful ones include:
Ecosystem Libraries and Frameworks
- Django's Contrib/Included Packges: A list of the included (re: "batteries included") premade apps/packages that ship with Django (such as its "Admin Site", "Authentication" and "GIS" apps and more.)
- Authentication:
- `django.contrib.auth` app:
- API Development:
Active Django Communities:
on
c: Flask
Flask is the other popular Python web development framework out there. In many ways, it works similar to Django, but is simpler, lighter and easier to learn. It is also less-opinionated than Django.
But unlike Django, it doesn't come with "batteries included".
You pretty much have to code your way through any new functionality (authentication, GIS, etc.) if you need them.
But it is great for beginners (since you don't have to worry about a lot of the web development issues) and for experienced devs as well (since you can roll your own custom solutions for many of your advanced web development needs.)
Flask has some
good documentation that covers what you need to know to get going with developing backend apps using the Flask web framework.
Flask Tutorials and Documentation
Some of the very useful Flask documentation and tutorials that are out there for your use, include:
Active Flask Communities:
on
d: Ruby on Rails
Rails is one of the oldest and most popular web development frameworks out there. Based on the Ruby programming language, it has been used (at this point) by almost two generations of programmers (if you count both CTOs and Junior Developers).
Ruby on Rails Tutorials and Documentation
Ruby on Rails also has some of the most comprehensive documentation you can find on a backend web development framework.
Some of these include:
Active Ruby on Rails Communities
on
e: Java Spring Boot
One of the most mature (and strictly-typed???) and battle-tested languages out there, Java also has its own backend web development framework called "Spring Boot".
Banks, academic institutions as well as up-and-coming startups have all used (and continue to use) Java Spring Boot to build both internal as well as user-facing applications.
If you ever find yourself at a fintech company (big or small), chances are that your apps' backends will be written partially or mainly in Java. It is also likely that the Spring Boot framework will be in the mix.
Spring Boot Tutorials and Documentation
There is a wealth of resources for learning about and using Java and the Spring Boot framework for developing web backends.
These include:
Active Java (Spring Boot) Communities:
on
f: ASP.Net
ASP.net (or simply ".Net" as it is often referred to) has been one of those frameworks that saw wide acceptance in the early web development communities. Today, many decades-old programs are still maintained in this language. It is also still very much in use especially in some (Microsoft-leaning) enterprise companies.
With the proper knowledge and skills, you can create full stack apps using .Net in the backend and React in the frontend.
.Net Tutorials and Resources
Here are some tutorials and documentation to help you develop web apps using .Net and integrate them with the React frontend app.
These include:
Active .Net Communities:
on
g: PHP Laravel
PHP is one language (along with JavaScript) that can claim to be native to the web. First billed as "Personal Home Page" (abbreviated to "PHP"), it has been used to build dynamic (as well as static) websites on the Internet for as long as it has been around.
PHP can also be used alongside React to create full stack web apps.
Loved by many and hated by others, PHP still works well for the web. It even has a popular backend framework, Laravel, that has seen wide acceptance in the PHP community.
PHP Laravel Tutorials and Documentation
Here are some useful resources to help you learn to build we apps with Laravel as well as use it with React to develop full stack web apps.
These resources include:
Active Laravel Communities:
on
h: Next.js
You may have often heard the term "Fullstack React" and probably got confused? Why? Because, you are right, React is just a frontend framework/library. It doesn't contain a backend; so, it couldn't be a "Full Stack" framework.
Well, that's until a short while back when some developers decided to created a React-centric backend framework that was intended to work seamlessly with a React frontend app.
They wanted a React-centric backend that supports, among other things:
- Server Side Rendering (SSR)
- Static Site Generation (SSG)
- Server Components
- Backend API-Creation Ability
- Routing
- Optimized Bundling
- and more ..
And, that's why and how Next.js was conceived ... and born (pun intended! :) )
So, how does NextJS (or "Next.js", if you don't want to lose the dot) work as a backend for React?
Here are some resources to help you navigate the terrain of using Next.js alongside React for a full stack web app development experience.
Next.js Tutorials and Documentation
NextJS Active Communities
on
Going Forward
If you need to integrate React with any of the above-discussed backend web frameworks, please, see (first and foremost) the linked official documentation.
If you still need more reference, please, delve into the list of articles listed for that framework.
Then, try do an actual integration yourself. It's all "easy" when you are reading a smoothly-written tutorial or watching a Youtube dev tutorial. It is a different ball game when you have your code editor open and need to get into the nitty gritty of doing the actual work of integrating React with that backend framework.
Then, if you encounter bugs (as you should if you are doing this for the first time), google the errors, fix them (likely using pointers from StackOverFlow threads and that framework's sub-reddit) and document how you solved the bugs and successfully integrated React with that framework.
This documentation you keep comes pretty handy when you want to repeat the same integration process much later on but run into bugs (because you missed a step or lost context).
Finally, ship that app to production and let the world be the judge of whether it works correctly and as (you) intended or not. Then, fix any issues that popup and redeploy to production.
Take the developer community's criticism and technical critique professionally and not personally. Many mean well; others just can't articulate their views and insights politely and professionally. Take the best of it and trash the rest (or save it for another day.)
In any case, document the process you followed, the errors you encountered and how you fixed them. That documentation could save you and your team hours, if not days, of precious developer time down the line.
Please, share your experience integrating React with your favorite web backend framework and how you navigated the process successfully (despite bugs, inadequate or stale documentation and just general "newbieness").
Till then, keep coding and making the world a better place for us all.
I wish you all the best! :)