Differences

This shows you the differences between two versions of the page.

--- node:node [2022/03/10 17:52] – [VSCode] utedass
+++ node:node [2024/08/19 10:24] (current) – [Getting started] utedass
@@ Line 1: / Line 1: @@
 ====== 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 =====
+<code bash>
+npm create vite@latest
+</code>
+Follow the guide. Pick for example react with JavaScript + SWC
+Then run
+<code bash>
+cd proj-dir
+npm install
+npm run dev
+</code>
+===== Getting started  -- OLD =====
+<code bash>
+npm init
+npm install pug
+npm install fastify
+npm install fastify-pug # Nope
+</code>
+<code javascript>
+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);
+}
+</code>
+<code javascript>
+//package.json
+//Add:
+  "type": "module",
+</code>
 ===== VSCode =====