DevToolKit1/README.md

# Developer Kit Day1

Developer Kit : Frontend

## Focus

* HTML
* CSS
* Javascript

## Tools

* [Visual Studio Code](https://code.visualstudio.com/download)
  + Ubuntu 20.04
  ```
  // to install from Snap store
  $ sudo snap install --classic code
  
  // to run vscode
  $ code .
  ```
* [NodeJS](https://nodejs.org/en)

## Visual Studio Code Extension

* Live Server
* Debugger for Chrome

## Debugger

* add `debugger` to code to stop and debug at chrome
* [VS Code Debugger](https://code.visualstudio.com/docs/editor/debugging)

## 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
  ```
  + Use Browser to browse "http://localhost:3001"
  + Misc : bootstrap css component for styling
  ```sh
  $ npm i bootstrap

  ```
  + index.js
  ```javascript
  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
  ```
  + Use Browser to browse "http://localhost:3000"