In this tutorial, I will show you how to build full-stack React + Node.js + PostgreSQL CRUD example. The back-end server uses Node.js + Express for REST APIs, front-end side is a React.js client with React Router, Axios & Bootstrap.
Full Article: https://bezkoder.com/react-node-express-postgresql/
Here are screenshots of the example.
– Show all objects:
– Click on Edit button to access an object:
On this Page, you can:
testdb=# select * from tutorials;
id | title | description | published | createdAt | updatedAt
----+------------------------------------+-------------------------------+-----------+----------------------------+----------------------------
5 | PostgreSQL Tut#1 | Tut#1 Description | f | 2020-03-11 09:14:01.773+07 | 2020-03-11 09:14:01.773+07
6 | React.js Tut#2 | Tut#2 Description | f | 2020-03-11 09:15:05.629+07 | 2020-03-11 09:15:05.629+07
8 | React Hooks Tut#4 | Tut#4 Description | f | 2020-03-11 09:24:33.295+07 | 2020-03-11 09:24:33.295+07
9 | React Express PostgreSQL Tut#5 | Tut#5 Description | f | 2020-03-11 09:24:53.463+07 | 2020-03-11 09:24:53.463+07
7 | Node. Express PostgreSQL (updated) | This is Description for Tut#3 | t | 2020-03-11 09:22:53.635+07 | 2020-03-11 09:28:45.568+07
(5 rows)
These are APIs that Node.js Express App will export:
Methods | Urls | Actions |
---|---|---|
GET | api/tutorials | get all Tutorials |
GET | api/tutorials/:id | get Tutorial by id |
POST | api/tutorials | add new Tutorial |
PUT | api/tutorials/:id | update Tutorial by id |
DELETE | api/tutorials/:id | remove Tutorial by id |
DELETE | api/tutorials | remove all Tutorials |
GET | api/tutorials?title=[kw] | find all Tutorials which title contains 'kw' |
– The App
component is a container with React Router
. It has navbar
that links to routes paths.
– TutorialsList
component gets and displays Tutorials.
– Tutorial
component has form for editing Tutorial’s details based on :id
.
– AddTutorial
component has form for submission new Tutorial.
– These Components call TutorialDataService
methods which use axios
to make HTTP requests and receive responses.
For more details, implementation and Github, please visit:
https://bezkoder.com/react-node-express-postgresql/
Run both projects in one place:
How to Integrate React with Node.js Express on same Server/Port
With Pagination:
React Pagination with API using Material-UI
Or Serverless with Firebase:
Happy learning, see you again!
#react #node #reactjs #postgresql #javascript #web-development