nus-fintech-sg
/
DevToolKit1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 Commits
1 Branch
0 Tags
888 KiB
JavaScript 54%
HTML 36.4%
CSS 9.6%
 
 
 
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '47af5e49e3'
${ noResults }
Go to file
yikth 47af5e49e3 add svg pieChart 5 years ago
Day1Exercise try Q5 & Q6 5 years ago
FormValidation add Form validation & graphics 5 years ago
JavaScriptBasics add sample code for object & JSON 5 years ago
asignmentQ4and5solution try Q5 & Q6 5 years ago
assignmentQ1Solution add assignment solution 5 years ago
chart1 add sample charts 5 years ago
chart2 test javascript 5 years ago
chart3 add sample charts 5 years ago
chart4 add svg pieChart 5 years ago
graphics add Form validation & graphics 5 years ago
jsGraphics add comment 5 years ago
jsObjectsAndJSON add assignment solution 5 years ago
playground add svg pieChart 5 years ago
.gitignore add README.md 5 years ago
README.md add svg pieChart 5 years ago
index.html initial sample code from luminus 5 years ago
index2.html initial sample code from luminus 5 years ago
index3.html add Form validation & graphics 5 years ago
myscript.js initial sample code from luminus 5 years ago
myscripts2.js add Form validation & graphics 5 years ago
mystyle.css initial sample code from luminus 5 years ago
mystyle2.css initial sample code from luminus 5 years ago

README.md

Developer Kit Day1

Developer Kit : Frontend

Focus

  • HTML
  • CSS
  • Javascript

Tools

  • Visual Studio Code
    • Ubuntu 20.04
    // to install from Snap store
$ sudo snap install --classic code

// to run vscode
$ code .
  • NodeJS

Visual Studio Code Extension

  • Live Server
  • Debugger for Chrome

Debugger

Prepare Project

  • ReactJS view is coded in xml markup and compiled using babel to plain R React code

Frontend with ReactJS (Client)

  • Packages
    • create-react-app
    $ npm -g install create-react-app
    • Create project "frontend_client" using React Framework code
    $ npx create-react-app frontend_client
    • Start the client
    $ cd frontend_client
$ npm start

    $ npm i bootstrap
    • index.js
    import 'bootstrap/dist/css/bootstrap.css'
    • VScode Extension
      • Simple React Snippet
    • Debugging : Chrome React Developer Tool Extension

Backend with ExpressJS (Server)

  • Packages
    • express
    $ npm install -g express-generator
    • Create project "backend_server" using Express Framework code with pug (Jade) view
    # express --view=pug backend_server
    • Start the Server
    $ cd backend_server
$ npm start