Saving data to go further with React

Saving data to go further with React
0
#1

Hi,

I’ve started React few weeks ago. I am still a beginner but I’d like to start saving my data as files or in databases for my apps.
For example, I have a todo-app but right now I can only add/delete/modify items. I’d like to save my items to use them later.
I also want to make a ‘storage’ app, like “what do I have right now in my closets ?”.

What should I use to do things like that ? JSON files or databases ?

#2

Really depends on the type of data. Generally, a database is a nice way of storing stuff like this, and personally, I’ve been tinkering with Firebase as a great way of setting up a react app without a complete back-end. That said… how comfortable are you with consuming an API? Pretty much any data-saving (unless you use LocalStorage and only save it into the browser’s storage) is going to involve some sort of API or data-fetching.

#3

I don’t really understand “consuming an API”.
I started the FCC part on Node.js/Express and I also want to try MongoDB (I struggle with tests and stuff).
My goal is mainly to get data from a database to build items that I could render after.

#4

Okay, so node and mongoose. Have you got into the node section of FCC yet? There, you go through building a (for example) URL shortener API. It interfaces with mongoose via Node, and returns a JSON object based on front-end actions.

You will perform some action on the front end, and then pass that to (I’d assume) a node server, whether by a post request, or some such. Node will do something with that, probably do something with mongoose, and return you a JSON object containing something.

An API, or Application Programming Interface, is how the front end and the back end can communicate. If you send something to a known endpoint where node is waiting, and it will send you back something, you’re “consuming” that API.

In your case, you might set up a node server listening for:

GET /todos       // a request for all todos as a JSON object
GET /todos/:id  // a request for one specific todo as JSON with that id
POST /todos    // a POST request to submit a todo, usually get it back as a JSON object
DELETE /todos:id // a DELETE request for a single todo, may return a JSON message or something
PATCH /todos:id // a PATCH request for a single todo, update info on it, and return a JSON object

Those are fairly typical API endpoints, where you’d have node listening for specific things, and the client would be expecting certain return data. What happens on the server, whether it goes to mongoose, MySQL or a text file, is transparent to the front end. It simply tosses the request to the server, which does what it does, then returns the expected JSON that the front end can use however it likes.

#5

For Todo app you can use localStorage() and for a database you can use Firebase.

#6

Thank you very much for this answer, this is what I needed. It really help me understand better what’s API and consuming API!

I’ve just started mongoose and I think this is what I wanted to do. I’ll finish those challenges and improve my app next !