# REACT.JS CORE CONCEPTS

# 1. Functional Paradigm and Principles

### **1.1. Programing Paradigm:**

#### a. What is programming paradigm ?

- Programming paradigm defines different styles and method to write a program.
- It can also be defined as method to solve some problems or do some tasks
- Programming paradigms are different ways or styles in which a given program or programming language can be organized

=> 3 differnt definitions, as long as you understantd it, you don't need to remember them all

#### b. Imparative Paradigm:

- A program based on this paradigm is made up of a series of instructinos that tells the computer what it should do in what order
- A desired solution path is specified

#### c. Declarative Paradigm:

- A program based on this paradigm is made up of instructions for how the program should deal with an input. Calculation are performed by manipulation of values, with the procedure controller by the process or recursion
- A desired result is specifed

#### d. Examples, Pros and Cons:

- Examples:



- Imparative Pros and Cons



=> React.js embrace Declarative Paradigm and Functional Programming

### 1.2 Functional Programming

Functional Programming Principles:
- Purity
- Higher-Order Functions

#### a. Pure Functions

- Pure function must take arguments and will always produce the same output if the same inputs are provided
- Pure functions rely only on local state and do not mutate external state
- Pure function do not produce side effects
- Pure functions cannot call impure functions

#### b. Impure Functions:

- Impure functions might take no arguments
- The same input will not produce the same output
- Impure functions might call pure functions
- Impure function produce side effects

Side effects:
- Making HTTP requests
- Mutating data
- Printing to a screen or console
- DOM manipulation
- Math.random()
- Getting the current time

#### c. Higher Order Function:

- What is Higher Order Functions:
+, Higher Order Function accepts another functions as an argument or
+, Returns a function as a result

- Example of Higher Order Function: Array methods such as
+, map()
+, filter()
+, reduce()
+, etc.

- Why do we use higher order function:
+, The reason why we use higher order function is the same reason why we use function
+, In order to abstract and reuse algorithms
+, Full answer for this: https://qr.ae/pvLNe5

Related topic: Callback function
Video for Higher Order Function:
https://www.youtube.com/watch?v=H4awPsyugS0&ab_channel=TheCodingTrain

# 2. Advantages Of React.js:

- React.js is a View API, View library and you need to install other libraries to handle things like routing, side effect handling, etc.
- Components-driven approach


# 3. JSX and Components:

### **3.1. What is JSX ?**

- JSX is a javascript extensions that provides syntactic sugar for function call and object contruction.
- Code in JSX will be converted by babel to javascript codes. This js code are used by React.js to compile HTML and JavaScript

> Syntactic sugar: is a syntax in a programming language that makes the code easier to read or to express.


### **3.2. What is a Component ?**

- Components are reuable chunks of JavaScript that return (via JSX) virtual HTML elements
- Components is a combination of HTML, CSS and JavaScript codes that is maded up different sections of a web application

> **Personal opinion**: components are like functions in the user interface world. This is because it is reusable, separated and takes in props (much like arguments in functions)

Common Questions:
- When to use class component over function componet
- What is Pure Components ?


Additional Resources:
https://docs.google.com/document/d/1royU69sWU2BJyIRGpA_sA5bdXq1-R0-gX9eO3oMM5Js/edit