Single Page Application (SPA)

• a application that loads a single HTML page and dynamically updates that page as the user interacts with the app
• to develop SPAs,
  • we need to use a JavaScript framework or library
  • like
    • React
    • Angular
    • VueJs
• advantages
  • fast: similar performance to native apps
  • responsive: the app responds to user interactions (browser size changes),
    • to make the app responsive
      • we need to use CSS media queries
      • frameworks: bootstrap, tailwind
  • user-friendly

functional programming language

• function is considered as first class citizen
  • function is created as a variable of type function
• function can be passed as an argument to another function
• function can be returned from another function as return value

map()

• used to iterate over a collection to transform the values to new ones
  • accepts a function as a parameter which gets called every time for every value
  • the parameter function must return a transformed value for original value
  • all the transformed values will be returned a collection as a return value of map function
  • the size of returned collection is always same as original collection

// array of numbers
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// get squqre of each number
const squares = numbers.map((number) => number ** 2)

function reference

• a reference to a function
• a variable that holds a function body's address

// here the function1 is a function reference
// to the function body
function function1() {
console.log('inside function1')
}

export and import

export

• used to export any entity from a file for others to import
• a file can export multiple entities for others

// App.jsx
export function App() {
...
}
// main.jsx
// importing with same name as that of the exported entity
import {App} from './App.jsx'
// importing with an alias
import {App as MyApp} from './App.jsx'