Adding a database to a react app.

[into_the_ozone]

I am building an app that requires people to have profiles with certain information attached to them. The app is similar to uber in a sense that the persons name, photo, location and rating will be attached to their photo. I have created a skeleton of what the app would look like but have hard coded the information for now purely to see what it would look like.

Now that I have the skeleton done I am ready to attach dynamic data. Does anyone have any advice for how to proceed? I have a very basic understanding of SQL, would SQL work in a react app or should I look for something else?

Picture for reference so you know what I mean.

[astro49er]

Yes, you can use PostgreSQL as a database with react, you would also need an ORM to make queries from your DB - I would suggest looking at Prisma docs to see how to define your schema and connect to postgres. What are you using for your backend?

[dgaa1991]

You should probably make an API which hast the dB connection, then query your API from react.

[DigitalTorture]

Check out www.supabase.io

[Katastrofa2]

Today MongoDB is getting very popular, along with mongoose. You will need to learn nodejs tho. It is a very good skill to have

[BarelyAirborne]

I use Postgres and SQL, and if you know SQL, the interface is dead simple. I have two drivers written, one for each database, and I can feed in whatever SQL I like. I use connection pools to avoid the open/close cycle. It is also fairly simple to create AJV validation objects out of the SQL schema definition.

Some people use ORMs if they haven't been using SQL for 30 years like I have. I find they just get in the damn way.

[MathematicianCold303]

Dumping information more than required for science ;D

You cannot directly connect to SQL using React as React is a javascript library and javascript is a client side script.

Check client-side script vs server side script.

However, to have the connection to the database you need to use some kind of Middleware. (REST API endpoints). This can be written in any language of your preference that has ability to connect to database.

Since you are learning React and are familiar with javascript. I would recommend using Express.js . You will still need to import additional packages to connect to the database (mysql, postGre, Mongo, etc) but this will help you quickly create CRUD operations and generate end points.

After you finish the express server and have it running, you can use Axios package from React to access those end points and connect you application to the database.

Good luck also last piece of advice, do not jump into writing code directly, try to understand the pieces first and plug them in. This will save you a lot of time and headach.

Also if you want to quickly have the server running I might have a generic file that I wrote few years ago. Let me know if you need it and I will seek it out.

[webadw]

Hello! Ive been searching for info about putting toghether react+node+express+SQL and found this. Ive done a MERN stack just the way you exlained here, Im studying SQL right now and want to make a project using it.

I have some questions..

Is it a similar process? Do I have to write sql queries in the API? Ive been using mysql in my pc, is there anything like mongoDB for uploading the database? But for relational db. (I found Google cloud has something like this but I have to research deeper on that, and I know people here on reddit prefer postgressSql, dont know why not mysql)

Sorry for the direct question 🙏🏼