JavaScript, TypeScript, Node.js and React Notes

Here I would like to share some notes as I learn JavaScript, TypeScript, Node.js and React as a software engineer who has experience mostly with Java and backend. Notes are mostly taken from Maximilian Schwarzmuller and Mosh Hamedani (codewithmosh) free youtube videos.

JavaScript Notes

JavaScript is dynamic, interpreted (complied at runtime), weakly typed and hosted language (runs in different environment such as browser).

JS execution is on a single thread.

Code can change at runtime. (e.g. type of a variable, let say you store a string on a variable and after that you can store integer on that variable ) -> dynamic

Variable types are assumed and can change on fly.

JS created to use for dynamically change browser by executing on the there however, the execution engine (Google’s engine V8) extracted and now can be used on the server side as well (e.g. node.js)

JS code can run on every browsers.

VS Code Extensions: “Material Icon Theme”, “Prettier — Code formatter”, “Live server”, “ESLint”, “Path Intellisense”, “PowerShell”, “Bracket Pair Colorizer 2”, “Docker”.

let -> new variable

const -> constant variable

** -> operator for exponentiation (e.g. 2**3=8)

Template literal:

let calculationDescription = `( ${defaultResult} + 10) * 3) / 2–1`;

Prefer not to put a semicolon after a function any declaration with curly bracket.

Shadowing means creating a new variable on a different scope.

Strings are primitive type like numbers in JavaScript unlike in Java.

Instead of using parseInt or parseFloat, strings can be converted to integer by just putting + to head of it.(e.g. +string)

Arrays can have mixed data.

Creating array:

let newArray = [];

Pushing data into an array:

newArray.push(“newData”);

undefined, null, NaN

defer keyword let us load early the JS code but execute them after HTML code properly parsed.

<script src=”assets/scripts/vendor.js” defer></script>

Async keyword let us load early the JS code but unlike above keyword, it execute as soon as possible. (order of execution not guaranteed)

Best practice putting JS script code and of the body section in the html code.

typeof keyword is important.

TypeScript Notes

TypeScript is a superset of JavaScript.

In JavaScript when you try to access a value of a input by input.value, it always returns a string no matter what the type of the input.

The term vanilla script is used to refer to the pure/plain JavaScript without any type of additional library.

When we upload the TypeScript to the machine, we are uploading compiler which translate TypeScript code to JavaScript code.

Always import JavaScript file in HTML file because browser can not run TypeScript file.

TypeScript doesn’t change JavaScript to work differently at runtime, it helps us with types during development.

TypeScript logic only executed at the development not at the runtime.

TypeScript is statically typed unlike JavaScript which is dynamically typed.

any type takes away every advantages that TypeScript gives. Be cautious while using it.

We can store a pointer of a function on a variable and then can use that variable as a function.

The core primitive types in TypeScript are all lowercase.

unknown type is a bit more restrictive than any type, however we shouldn’t use every time as well. It might be more preferable than any type for some cases because of the need of explicitly type checking.

never type usually used in error throwing functions as a return type which never returns anything.

Starting the project

npm init
npm install — save-dev lite-server

Package.json -> scripts -> “start”: “lite-server”

Don’t run tsc command everytime

tsc app.ts — watch or just -w 

Hence you don’t need to run the command at every single change.

Running multiple TypeScript files

tsc — init (only once, hence tsconfig.json going to be generated)
tsc (to run al TypeScript files in the project) or with watch keyword of course.

tsconfig.json tells TypeScript to how to compile .ts files.

in tsconfig.json

“exclude”: [“node_modules”]

is default. However, if you want to add something to exclude then you need to add this one too.

*can be used while indicating file in that json, such as app_*.ts or *.ts so on.

in tsconfig.json

“outDir”: “./dist”

indicates generated JavaScript files location.

“rootDir”: “./src”

indicates the location of the TypeScript files.

“noEmitOnError”: true,

not generates any JavaScript file if TypeScript files has a any error.

Node.js Notes

Node.js is JavaScript on a server, more precisely on a any machine.

Vanilla V8 means plain V8 without Node.js extensions.

Node.js is event driven by using listener in its nature.

Node.js is asynchronous by nature, that’s why it’s event driven.

Node.js works with single JavaScript thread. However, worker pool handle requests in different threads. And event loop listens callbacks.

npm i nodemon

with this package, you do not need to restart at every change by running only once this nodemon app.js.

npm i joi

this package make it easy to validate data and it returns proper error messages to the client.

Node.js should not be used for CPU intensive application (such as video processing), it’s better to use for data intensive and real-time applications.

At the terminal this commands open the folder inside the VS Code editor.

code .

In node we import as:

require(‘./logger’);

And export as:

module.exports.log = log;

Always use synchronous methods unless you strictly need otherwise.

Express framework build in top of the HTTP module in the Node.

React.js Notes

Maintained by Facebook.

Netflix coded with React.js.

With React.js, we have a declarative, component-focused approach instead of imperative approach with plain JavaScript.

React.js can be used for only one/some part of UI as a widget approach or for the entire UI as a Single-Page-Application (SPA) approach.

Other alternatives: Angular.js and Vue.js.

Angular usually used for more complex projects and Vue is somewhere between Angular and React.

React only focuses on Component. For example, for routing you need to rely on the community packages which is unlike with Angular.js and Vue.js.

Creating a new React project

npx create-react-app my-app

React’s JavaScript function typically and usually returns JSX code (HTML code) which can be rendered in the browser. But of course can return other types as well like a plain text and etc.

In React, every component function gets props parameter.

React hook only can be called inside of the React component functions.

Routing

npm install react-router-dom

React component must be synchronous and must not return promise rather must return JSX.

{ useState } from ‘react’ 

always returns an array, first value is current state snapshot, second value is for updating the state.

{ useEffect } from ‘react’ 

for fetching data without causing an infinite loop.

Redux is JavaScript library for managing states in React, Angular and so on.

React also has a state management library itself which is called:

{ createContext } from ‘react’

When you create your own React component start its name with capital letter.

We import named exports with curly brackets. Such as:

import { FavoritesContextProvider } from ‘./store/favorites-context’;

To use a context we import like:

import { useContext } from ‘react’;