General Concepts

Question 1

Synchronous operations

Answer 1

are executed one at a time, and each operation must complete before the next one can start. In other words, synchronous operations block the execution of the program until they are finished.

Question 2

asynchronous operations

Answer 2

do not block the execution of the program. Instead, they are designed to allow the program to continue executing other tasks while waiting for the asynchronous operation to complete.

Question 3

purpose of a callback

Answer 3

to specify a function that will be executed or called at a later point in the program, often as a response to an event or the completion of an asynchronous operation.

Question 4

setState what is does? is syncronic?

Answer 4

When you call setState, React will update the state object and trigger a re-rendering of the component, which means the component will update and reflect the new state.

The setState method in React is typically asynchronous. This means that calling setState doesn’t immediately update the state and re-render

Question 5

this.state = {
counter: 0,
name: ‘John’
}; how to access to counter state?

Answer 5

this.state.counter holds the value of the counter, and this.state.name holds the value of the name.

Question 6

when getDerivedStateFromProps is called?

Answer 6

getDerivedStateFromProps is a static method that is called before rendering and is invoked whenever the component is receiving new props or state updates.

Question 7

getDerivedStateFromProps method for funtions?

Answer 7

It should be used for pure calculations based on props and state, without relying on any component-specific instance variables or methods.

Question 8

can I use this in getDerivedStateFromProps?

Answer 8

is a static method, so you cannot access the this keyword or the component instance within this method

Question 9

why getDerivedStateFromProps is static?

Answer 9

By making it static, it is enforced that the method does not have access to the component instance (this) and cannot modify any instance-specific data or invoke instance methods. meaning its output solely depends on the inputs and does not have any side effects.

Question 10

what is a static method?

Answer 10

A static method in JavaScript is a method that belongs to a class itself rather than to an instance of the class.

Question 11

what is a class?

Answer 11

a class is a template for creating objects of a particular type. It defines the properties (attributes) and behaviors (methods) that the objects instantiated from the

Question 12

How to cretae an instance of this class?

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

sayHello() {
console.log(Hello, my name is ${this.name} and I am ${this.age} years old.);
}
}

Answer 12

const person1 = new Person(‘John Doe’, 25);
person1.sayHello();

Question 13

Which are the propertes and methos od this object?

const person = {
name: ‘John Doe’,
age: 25,
sayHello: function() {
console.log(Hello, my name is ${this.name} and I am ${this.age} years old.);
}
};

Answer 13

In this example, the person object has two properties (name and age) and a method (sayHello).

Question 14

is a class intance same as an object?

Answer 14

Yes, in the context of object-oriented programming, a class instance and an object are essentially the same thing.

Question 15

what is object-oriented programming?

Answer 15

Object-oriented programming (OOP) is a programming paradigm that organizes code based on the concept of objects, which are instances of classes.

Question 16

what is a stack
/pila?

Answer 16

a stack is an abstract data type that represents a collection of elements with a particular behavior known as last-in, first-out (LIFO). It is named “stack” because it resembles a stack of objects where new items are added to the top and removed from the top.

Question 17

three main phases of react lifycle

Answer 17

mounting, updating, and unmounting.

Question 18

4 methods of mounting phase

Answer 18

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

Question 19

5 methods of Updating phase

Answer 19

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

Question 20

1 method of Unmounting phase

Answer 20

componentWillUnmount()

Question 21

what are the purpose of hooks?

Answer 21

Hooks are a feature that allows developers to use state and other React features in functional components without the need for class components.

Question 22

what is jest?

Answer 22

Jest is a popular JavaScript testing framework developed by Facebook.

Jest is a testing framework that provides the overall test running infrastructure. It provides functionalities such as organizing your tests into suites and test cases, providing test doubles (mocks, spies, etc.), measuring code coverage, and offering utilities for assertions. Jest does not tie you to a specific way of testing and can be used with various testing approaches and libraries.

Question 23

what is enzyme?

Answer 23

Enzyme is a JavaScript testing utility developed by Airbnb that provides additional testing capabilities for React components. It is often used in conjunction with Jest or other testing frameworks to facilitate the testing of React components in isolation. As of September 2020, Airbnb has officially announced that Enzyme development and maintenance have been discontinued.

Question 24

what is react testing library?

Answer 24

React Testing Library is a popular testing utility for React applications that promotes testing React components in a way that resembles how users interact with the application. It emphasizes testing components based on their rendered output and behavior rather than focusing on implementation details.

Question 25

prevState vs prevProps

Answer 25

prevState represents the previous state of a component, while prevProps represents the previous props of a component.

Question 26

what is is truthy? 6

Answer 26

true: The boolean value true is obviously truthy. Non-empty strings: Any string that contains at least one character is considered truthy. Non-zero numbers: Any number that is not zero (positive or negative) is considered truthy. Objects: Any object, including arrays and functions, is considered truthy. Arrays: Arrays are objects in JavaScript, so they are also considered truthy. Functions: Functions are objects as well and are considered truthy.

Question 27

you can use square brackets [] to enclose the elements of .....

Answer 27

an array

Question 28

you can use curly braces {} to enclose ....

Answer 28

an object. const myObject = { name: 'John', age: 25, city: 'New York', isStudent: true, };

Question 29

what is a fetch?

Answer 29

fetch is a built-in function used to make asynchronous network requests and retrieve resources from a specified URL. The fetch function takes a URL as its first argument and returns a Promise that resolves to the response of the request.

Question 30

how is a fetch structure? 3 parts

Answer 30

fetch(url) .then(response => { // Handle the response }) .catch(error => { // Handle any errors });

Question 31

what is response.json in a fetch?

Answer 31

In the fetch function, the response.json() method is used to extract the response data as JSON. It returns a Promise that resolves to the parsed JSON data from the response body. fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { // Handle the parsed JSON data console.log(data); }) .catch(error => { // Handle any errors console.error('Error:', error); });

Question 32

how is the json format?

Answer 32

it variaety that is why we have JSON.stringify() function is used to convert JavaScript objects into JSON strings, while JSON.parse() is used to parse a JSON string and convert it into a JavaScript object.

Question 33

what is a script?

Answer 33

A script is typically used to automate tasks or perform specific operations. It can be written to interact with a system, manipulate data, control the behavior of a program, or perform various other functions. Popular scripting languages include JavaScript, Python, Ruby, Perl, Bash, PowerShell, and many others.

Question 34

give an example of a class and class intances with a car

Answer 34

class Car: def __init__(self, make, model, year): self.make = make self.model = model self.year = year def display_info(self): print(f"Make: {self.make}, Model: {self.model}, Year: {self.year}") Creating car instances car1 = Car("Toyota", "Camry", 2020) car2 = Car("Honda", "Civic", 2018) car3 = Car("Ford", "Mustang", 2022)

Question 35

Are objects same as class?

Answer 35

Objects are instances of a class created with specifically defined data. Objects can correspond to real-world objects or an abstract entity.

Question 36

How does fetch works with a promise?

Answer 36

To get data using promises in JavaScript, you typically use the fetch() function, which returns a promise that resolves to the response of the HTTP request. fetch('https://api.example.com/data') .then(response => response.json()) // Parse the response as JSON .then(data => { // Work with the data console.log(data); }) .catch(error => { // Handle any errors that occurred during the request console.error('Error:', error); });

Question 37

¿Qué es ESLint?

Answer 37

ESLint es una herramienta de código abierto enfocada en el proceso de "lintig" para javascript (o más correctamente para ECMAScript). ESLint es la herramienta predominante para la tarea de "limpiar" código javascript tanto en el servidor (node. js) como en el navegador. "Linting" es un proceso que se realiza en la etapa de desarrollo para verificar el código y encontrar cualquier problema potencial. Un "linter" es una herramienta que se usa en este proceso. El linter realiza varias comprobaciones en el código, como la detección de errores de sintaxis, errores de formato, errores de estilos de codificación y otros problemas posibles. Un linter muy popular para JavaScript es ESLint. Puedes personalizar las reglas de ESLint según tus necesidades, lo que significa que puedes definir tus propios estándares de estilo de código y hacer que ESLint verifique el código en consecuencia.

Question 38

What is npm?

Answer 38

npm comes bundled with it. With npm, you can: Author your own Node.js modules ("packages"), and publish them on the npm website so that other people can download and use them Use other people's authored modules ("packages") So, ultimately, npm is all about code sharing and reuse. You can use other people's code in your own projects, and you can also publish your own Node.js modules so that other people can use them.

Question 39

Que es deploy?

Answer 39

Deployment is the mechanism through which applications, modules, updates, and patches are delivered from developers to users.

Question 40

What package.json is?

Answer 40

The package. json file is the heart of any Node project. It records important metadata about a project which is required before publishing to NPM, and also defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package.

Question 41

3 things to do with new code in j***s

Answer 41

The methods used by developers to build, test and deploy new code.

Question 42

Code in dev

Answer 42

-You can check which git commit the code has been put in dev from.

Question 43

Dev enviroment

Answer 43

A development environment in software and web development is a workspace for developers to make changes without breaking anything in a live environment.

Question 44

Production enviroment

Answer 44

A production environment is a real-time setting where the latest versions of software, products, or updates are pushed into live, usable operation for the intended end users.

Question 45

You deploy to...

Answer 45

enviroments.... could be dev, uat, uat2...

Question 46

What does j***s does?

Answer 46

you can deploy, is a pipeline that has a code commit source, then a build, a test and a deply to the desire enviroment.

Question 47

What are props? aka properties

Answer 47

which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. IMMUTABLE BY CHILDS

Question 48

What is a state?

Answer 48

The state is a built-in React object that is used to contain data or information about the component. A component's state can change over time; whenever it changes, the component re-renders.

Question 49

When a components re-renders?

Answer 49

React components automatically re-render whenever there is a change in their state or props.

Question 50

CONTEXT API- useContext to avoid props drilling porblems to super grand childrends :(, like red hairs!

Answer 50

for global states

Question 51

Example of useContext dark/light theme in an website

Answer 51

affect all the components and all components should known the state. Is a GLOBAL STATE. SHARE Global data :) Tipical, userPermission according to id

Question 52

GLOBAL STATES: You need (3)

Answer 52

-create a context -useContext -provider for the context -then you can access from x component to that needed state of the context. -you create a global state

Question 53

theme.provider or x.provider. What it does?

Answer 53

The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider.

Question 54

memoization,   const value = useMemo(() => ({a, b}), [a, b]); what is for?

Answer 54

avoiding unnecessary rendering when two props are the same but different objects

Question 55

Statefull component

Answer 55

Needs states, just like input of my fav coutries to live in!

Question 56

Stateless component

Answer 56

dosent have states, it could use props!

Question 57

props drilling! We hate... we fix with...

Answer 57

useContext :)

Question 58

uncontrolled component

Answer 58

is a component that maintains its own internal state. No component re-renders. Browser DOM handles the changes to the element. If you are using a form, you are NOT using setState to capture input. Instead you could be using useRef hook to capture node value, current.value. Is an state matain by the DOM

Question 59

controlled component

Answer 59

a controlled component is a component that is controlled by React state. Ex. form input use UseState to update input values and save it as internal state of the component

Question 60

array destructuring Example :)

Answer 60

Destructuring the array in JavaScript simply means extracting multiple values from data stored in objects and arrays

Question 61

object destructuring

Answer 61

Destructuring the array in JavaScript simply means extracting multiple values from data stored in objects and arrays

Question 62

object destructuring

Question 63

array of objects, how to write it?

Answer 63

const array = [ {id:1, name: "Peter"}, {id:2, name: "John"} ]

Question 64

how to map over an array of objects and show the name? {asianCountries.map(( x, y )=>

{xxx}

)}

Answer 64

{asianCountries.map((country, id )=>

{country.name}

)} order of country and id, country.name

Question 65

4 basic html things for a form:

Answer 65

1. form 2. label 3. input 4. button

Question 66

useState hook from React, what is and what returns?

Answer 66

is a function that returns an array with two elements: the current state value (in this case, an object representing a car) and a function to update that state (in this case, setCar).

Question 67

what is APi?

Answer 67

es una interfaz que te permite "comunicar" cosas que hablan diferentes. Ej celular tipeo. Las APIs comunican programas/sistemas entre si. Ejemplo integraciones, fb con ig, misma publicación. Un API es un programa para ser usado por otro programa. Asi como en cualquier programa al tu interactuar con el , ingresando datos el programa te responde. Tu puedes hacer un programa que interactue con otro programa (API) y de esta manera tu programa disfrutara de los beneficios que le pueda ofrecer la AP

Question 68

pure vs impure functions

Answer 68

Pure Functions: A pure function is a function that always returns the same output given the same inputs. It has no side effects, meaning it does not modify external state or variables, nor does it interact with the outside world (e.g., API calls, DOM manipulation). Pure functions are predictable and easier to reason about since they only rely on their input arguments and have no hidden dependencies. In React, pure functions are commonly used for components that are based solely on their props. Given the same props, they always render the same output.

Question 69

useEffect when it renders?

Answer 69

By default, if no second argument is provided to the useEffect function, the effect will run after every render.

Question 70

what is a const with an arrow function in react?

Answer 70

a const with an arrow function refers to creating a constant variable that holds an arrow function. Arrow functions are a concise way to define functions in JavaScript, and they have a more compact syntax compared to traditional function expressions. const sayHello = (name) => { return 'Hello ' + name; }

Question 71

what is a function?

Answer 71

A function is a fundamental concept in programming and refers to a reusable block of code that performs a specific task or set of tasks. Functions help in organizing code into logical and manageable pieces, making it easier to read, write, and maintain.

Question 72

inputs in fucntions are called...

Answer 72

arguments or parameters

Question 73

JS is syncronims or asyncronic?

Answer 73

Although it's synchronous by nature, JavaScript benefits from asynchronous code.

Question 74

Object.keys(user)

Answer 74

Object.keys(user) is a JavaScript method that is used to extract an array of keys from an object. In this context, it seems like user is an object, and Object.keys(user) is being used to check if the object has any properties (keys) or not.

Question 75

single thread JS

Answer 75

Node.js runs JavaScript code in a single thread, which means that your code can only do one task at a time.

Question 76

is fetching data a side effect?

Answer 76

fetching data from a third-party API is considered a side-effect.

Question 77

what is AJAX? not football :)

Answer 77

AJAX = Asynchronous JavaScript

Question 78

what is a reducer?

Answer 78

Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called a reducer.

Question 79

when to use useReducer and useState

Answer 79

useState, it's better to use it with primitive data types, such as strings, numbers, or booleans. The useReducer hook is best used on more complex data, specifically, arrays or objects.

Question 80

what is a custum hook?

Answer 80

A custom hook is simply a way to extract a piece of functionality that you can use again and again. A custom hook is essentially a JavaScript function that starts with the word use and can call other hooks. By convention, hooks always start with the word use.

Question 81

when to use useReducer hook

Answer 81

alternative to useState, but updates different the state manage its state with a reducer. inspire in redux! where the state logic is more complex and involves multiple sub-states or actions that affect each other. It can help to avoid prop drilling (passing state down through multiple layers of components) and can lead to more maintainable and predictable code. Base on an action the state will increment or decrement.

Question 82

const [state, dispatch], what is this called? const [state, dispatch] = useReducer(reducer, initialState)

Answer 82

This is array destructuring in JavaScript. We are using it here to extract two values from the return value of the useReducer hook. Extraes el stata y el dispatch del hook useReducer que devuelve un array.

Question 83

where I can find JSX?

Answer 83

JSX allows developers to write HTML-like code within JavaScript, making it easier to create and manipulate the UI components in React applications. JSX is used in the return statement of a React component.

Question 84

what is used above the return in react?

Answer 84

JavaScript is commonly used above the return statement in a React component. The code above the return statement typically includes various JavaScript constructs,

Question 85

what react does with components?

Answer 85

combines components to create a view/screen

Question 86

what is a state?

Answer 86

values of variables you have on yoour components.

Question 87

aim of npm

Answer 87

npm is all about code sharing and reuse. You can use other people's code in your own projects, and you can also publish your own Node.js modules so that other people can use them.

Question 88

node.js why is needed?

Answer 88

React itself can be used without Node.js in the client-side browser environment, having Node.js installed can greatly facilitate the development, deployment, and overall build process when working with React projects. -js is a language that can be run in the browser, but for that needs interpretation, js enginee or babel. -you can use node js as a server side component and enables you to use javascript as a fullstack (front and back end) -a javascript runtime enviroment

Question 89

what is react (2)?

Answer 89

React is just a front-end library. You're going to need to interact with other third-party libraries. client-side library. You do need to figure out how you're going to do routing and server client communication.

Question 90

which is react design philosphy?

Answer 90

component based arquitecture, for reusable component code -colecction of components -example: header, payment, sidebar

Question 91

advantages of components? (3)

Answer 91

reusable independent stand alone parts

Question 92

what is the DOM and how to edit it?

Answer 92

It represents a web page as a tree-like structure of objects. Each object corresponds to an HTML element or content on the page. Developers can use the DOM to interact with and modify the page's content, structure, and style using JavaScript.

Question 93

react virtual dom

Answer 93

tbd..

Question 94

functional components acts like...

Answer 94

js function

Question 95

index.js what is load?

Answer 95

the app component. Aka main component

Question 96

index.html to be done

Answer 96

tbd

Question 97

All component names must be...

Answer 97

capitalized, bc lowecase is seen as html elements

Question 98

In return, variables, constants or states must be...

Answer 98

wrap around brackets {}

Question 99

JSX con be defined as a combination of...

Answer 99

css, html and js

Question 100

what is transpiling and what is babel?

Answer 100

-Babel: The React code, including JSX, is passed through Babel, a popular JavaScript transpiler. -A browser cannot understand JSX syntax. -A transpiler takes a piece of code and transforms it into some other code.

Question 101

what is ES6?

Answer 101

JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript 6) is the newer version of JavaScript that was introduced in 2015.

Question 102

what is a website navegation?

Answer 102

refers to the process of navigating or moving through a website to find and access its various pages, content, and features. From component to component

Question 103

examples of navegation components?

Answer 103

navbar with icons

Question 104

How many divs render one react app?

Answer 104

entire react app is loaded inside one div and index.js. The content of that div is controlled by react.

Question 105

Example of navegation with react elevator..

Answer 105

You press 6 and that floor aka component is render :)

Question 106

What is bundling?

Answer 106

When the browser requests the application, return and load all necessary HTML, CSS and JavaScript immediately. This is known as bundling.

Question 107

what is react routing library?

Answer 107

-is same as react-router-dom -first thing, import BROWSERROUTER -wrap your app with broserRouter, in index.js -from you app component, import routes, route -in your app return use first and then

Question 108

what is transpiling and babel?

Answer 108

1. For React code to be understood by a browser, you need to have a transpiling step in which the JSX code gets converted to plain JavaScript code that a modern browser can work with. 2. Babel is a JavaScript Compiler. What Babel does is this: it allows you to transpile JSX code (which cannot be understood by a browser) into plain JavaScript code (which can be understood by a browser).

Question 109

what is the index.html file?

Answer 109

the index.html file plays a critical role as it serves as the entry point of the React application

Question 110

8 points of index.html file.

Answer 110

: This declaration specifies that the document is an HTML5 document. : The element is the root element of the HTML page. The lang attribute indicates the language of the document, which is set to "en" for English. : The element contains meta-information about the HTML document, such as the character encoding and viewport settings. : This meta tag specifies the character encoding for the document, typically set to UTF-8 to support a wide range of characters. : The viewport meta tag sets the initial width and scale of the web page, ensuring proper responsiveness on different devices. : The