By now, we learned a lot
about the most essential React features you must know to
get started building Reactive user interfaces with React.
But the demo app, the demo website we built thus far
of course only works in the browser.
There It works absolutely fine, but if we add posts
and we then reload this site, all the data is lost
because at the moment it's only stored in memory
whilst this React app, this JavaScript app
in the end is running in React.
And that's really important
is a frontend JavaScript library.
You use it to build a user interface.
It powers your web user interface with JavaScript
in the end, and it therefore executes in the browser.
Indeed, what we're building with ReactJS in most cases
is a so-called single page application and application
a website where we in the end have only one single HTML file
this index html file here, and then everything
that happens on the screen is powered by JavaScript.
So if we open a model here, that's not a new page
not a new HTML file that's being downloaded or opened.
Instead it's the existing page being edited
by JavaScript the DOM being edited by JavaScript.
If I view this page source here, I just see the basically
empty HTML file, this index html file
that was downloaded initially.
But in this file we have this script import, which
in the end imports our Java script, our React application
and its stat application that then edits the DOM
so that the actually rendered DOM has far more elements
than the initial HTML file.
So we use React to build this interactive front end, and
in the end what we're building is a single page application.
But it would of course be nice if the posts
that we create here would not just be stored locally
in memory so that they're lost whenever we reload this
and so that also no other users can see them.
But if we instead had some backend to which we
can send requests and from which we get back responses
where the data could then be stored in a actual database.
So with backend, I mean a separate web application
a web api, rest api, for example, running on some server
so not in the browser of our users, but on some server owned
by us, for example, and that backend api,
that rest API could be built with any language
or framework of your choice, not necessarily with JavaScript
and typically not with React, since React
is not really a backend library, I'm saying not really
because there are frameworks like Next JS or Remix
on which I also got courses that build up on top of React
and allow you to blend backend code into your React app.
But React itself is not a backend library.
Instead, it really focuses on allowing you
to build interactive user interfaces as you learned.
But we still might want to be able to store data
on some backend, in some database, for example.
And for that we need such a backend api
either a third party API or an API built by us
and then that api, that backend service could interact
with files or with databases
or anything like that so that our frontend application
the React app then can send HTTP requests
to the backend so that some data gets stored there
or so that we fetch some data from the backend which
is then returned to the frontend through an HTTP response.
That is something we might want for this demo app here.
And for that reason attached you find a link
to a dummy backend project, a dummy rest API
in the end built with Node and Express JS.
So no React code here
and you don't need to know node or express to follow
along because this backend API is already finished.
And what I'm doing here
in this backend API is I'm storing some data
in a post dot JSON file.
We could also use a database
but that would simply require some extra setup.
So for this demo, I'm just
using this file we're storing some data there
and we're fetching some data from there.
And I provide various REST API endpoints
that allow us to get a single post or create a new post.
And then I got all the logic
for doing those tasks in here in this api.
And therefore if we start this backend server locally
on our machine for this demo, we can add code
to this frontend application to this React application
for it to reach out to this backend.
And of course, if you
would deploy this you would have two different servers
with two different domains.
Here we can run both on our local machine
and simply use different ports to simulate different servers
and domains.
This backend application listens
on port 8080 and we can start it by first of all, running
NPM install to install all dependencies that are required
and then running NPM start to start that node server.
And just as the front end development server
you should keep that server up and running as long
as you wanna be able to send requests to this backend.
So now with that back at up and running
we can go back to the front end
and add some code to it that allows us
to send requests to that back and to create new posts,
and of course to fetch posts as well.