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
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 |
