Thanks to visit codestin.com
Credit goes to github.com

Skip to content

This is the first webapp for Mysql db access with React

License

Notifications You must be signed in to change notification settings

neomichael/react_sql_html

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Step 001. Create you prefer folder name. Under the that folder create server and client subdirectory.
Step 002. Under server directory and Get into terminal. type "npm init -y"
Step 003. Modify package.json file.
Step 004. Make these changes.
{
  "name": "server",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Step 005. Create server.js file under server directory.
Step 006. Get into terminal/under server directory and type "npm install express cors nodemon"
Step 007. Create server.js
- - - begin
const express = require('express')
const mysql = require('mysql')
const cors = require('cors')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'public')))
app.use(cors())
app.use(express.json())

const port = 5000

const db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "mysqlMic678#",
    database: "sakila"
})

app.listen(port, ()=>{
    console.log('listening on port 5000')
})

- - - end

Step 007.5 Install mysql under server directory.
npm install mysql

Step 008. Switch to terminal window and type following
"npm run dev"

Step 009. run browser check port
localhost:5000
you should "Cannot GET /"

Step010. Download XAMPP
https://www.apachefriends.org/zh_tw/download.html
notes: 
Since there is no php and Apache installed. the purpose
for this administration tool is for create table with UI Interface.
So, just forget isTypedArray.

Step011. Create student dateabse in mydb within mysql.
CREATE DATABASE mydb;
USE mydb;
CREATE TABLE stduent_details(
    id INT PRIMARY KEY auto_increment,
    name VARCHAR(50),
    email VARCHAR(50),
    age INT,
    gender VARCHAR(50),
);

Step012. Go into terminal
cd client directory and type "npx create-react-app ."

Step013. Update client directory package.json
pass the api call from front end to backend.
simplifying api endpoint urls and.
install front-end dependencies to enhance your 
development experience.

{
    "name": "react_sql_html",
    "version": "1.0.0",
    "proxy": "http://localhost:5000",
    . . . . 

Step013. Install axios to have better front-end
performance to facilitate http request handling,
'react-router-dom' for client-side 'bootstrap' to
leverage pre-made styles and UI components.


Step014. Under client subdirectory

Step015. Download and install bootstrap.
https://www.npmjs.com/package/bootstrap

by typing in terminal 

"npm install axios bootstrap react-router-dom"

Step016. npm start; wait and check the browser react page display

Step017. customize app.js file under client/src directory.
 
Step018. Create elements subdirectory under client directory.
Step019. Create Create.jsx, Edit.jsx, Home.jsx, Read.jsx,
Step020. Complete components function for all these jsx.
Step021. Update App.js

About

This is the first webapp for Mysql db access with React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published