Table of Contents

NodeJS

Terminology

Term Description
react Front-end framework
JSX HTML-style coding in JS
fastify Node framework for backend
HMR Hot Module Replacement, reloads page on save using websocks or something
Routing Moving user to different pages

Libraries and frameworks

Name Category Description
vite Build environment? Makes wokring with front end easier. Helps with project generation, running dev code etc.
react Front-end framework Uses JSX and has a lot of other stuff
MUI Components Front end component and layout framework
bootstrap Components Front end component and layout framework

VS Code

Plugin name Description
Prettier - Code formatter For formatting on save, needs some setup to work
ES7+ React/Redux/React-Native snippets Nice snippets for react, for example rfce
indent-rainbow Easier to read indents
Hotkey Description
c-d Find similar word and enter multi-cursor edit mode, press multiple times

Resources

Link Description
https://react.dev React docs
http://jsonplaceholder.typicode.com/ Fake API for testing calls

Getting started

npm create vite@latest

Follow the guide. Pick for example react with JavaScript + SWC

Then run 

cd proj-dir
npm install
npm run dev

Getting started -- OLD

npm init
npm install pug
npm install fastify
npm install fastify-pug # Nope
import Fastify from "fastify";
 
// Fastify instance
const fastify = Fastify({logger:true});
 
 
fastify.get("/", (req, res)=>{
    res.send( "HelloWorld" )
} )
 
 
try{
    await fastify.listen({port:3000, host: "127.0.0.1"}); // Start server process, wait for it to exit
}catch(err){
    console.log(err);
    process.exit(1);
}
//package.json
//Add:
 
  "type": "module",

VSCode

Command Function
c-P Open all commands
c-p Search for files in project
c-F Search in code
c-, Settings