Next Generation Javascript

Question 1

Component?

Answer 1

Core building block of React

Question 2

What is the Root of a React Component Tree

Answer 2

App

Question 3

What does each Component need to return?

Answer 3

Each component needs to return / render some JSX code

Question 4

What is JSX code?

Answer 4

It defines what HTML-like code React renders

Question 5

What are the two types of React components?

Answer 5

Functional and Class Based

Question 6

What is a Functional Component?

×

Answer 6

const cmp = ( ) => {return

some JSX
};

×

Question 7

What is a Class-Based Component?

×

Answer 7

class cmp extends Component

Render ( ) {

Return

some JSX

;

}

};

×

Question 8

What are Props?

Answer 8

Arguments passed to a component function

{props.title}

Question 9

What are two ways of creating variables?

Answer 9

Let -> variable value

Const -> Variable that doesn’t change

Question 10

What is an arrow function?

Answer 10

const myfunc = (arguments) => {function body}

Question 11

How to write an arrow function with one argument?

Answer 11

const printMyName = name => console.log(name);

printMyName(‘Frank’);

Question 12

An arrow function with two arguments

Answer 12

const printMyName = (name, age) => {

console.log(name, age);

}

printMyName(‘Frank’, ‘60’);

Question 13

Arrow function shortcut if only returning one value

Answer 13

const mutliply = number => number*2;

console.log(multiply(2));

Question 14

How to export a function

Answer 14

Export

person.js

const person = {name: ‘Max’};

export default person;

Import

import person from ‘./person’;

import prs from ‘./person’;

Question 15

Export multiple functions

Answer 15

utility.js

Export

export const clean = () => { };

export const basedata= 10j;

Import

import {basedata} from ‘./utility’;

import {clean as cl} from ‘./utility’;

import * as bundled from ‘./utility’;

Question 16

What is a class

Answer 16

A blueprint for an object

class person {

name= ‘Max’ PROPERTY

call = () => { }. METHOD

}

Question 17

How to instantiate a class?

Answer 17

class person {

name= ‘Max’ PROPERTY

call = () => { }. METHOD

}

const myPerson = new.Person

Question 18

What is inheritance

Answer 18

class Person extends Master

Question 19

super()

Answer 19

if you extend a class you must call ‘super’ to initiate the parent class when instantiating a new child class

Question 20

What is a spread operator?

Answer 20

Used to split up array elements or object properties

const newArray = […oldArray, 1,2]

const newObject = {…oldObject, newproperty:5};

Question 21

What is a rest operator?

Answer 21

Used to merge a list of function arguments into an array

function sortArgs(…args) {

return args.sort()

}

Question 22

What is destructuring?

Answer 22

Easily extracts array elements or object properties and stores them in variables

Array[a,b] = [‘Hello’,’Max’]

Object {name} = {name=’Max’, age: 28}

Question 23

What are primitive types?

Answer 23

Actual value is copied

numbers, strings, booleans

Question 24

What are reference types?

Answer 24

A pointer is copied

objects, arrays

to actually make a copy of the object or array use a spread operator

const secondPerson = {

…Person

};

Question 25

Array functions - map

Answer 25

const numbers = [1,2,3];

const doubleNumbers = numbers.map((num) =>

return num*2;

};

Question 26

What are the 8 data types in javascript?

Answer 26

Number - of any kind

BigInt - Integers of arbitrary length

String - zero or more characters

Boolean - True or False

Null - Fir unknown values

Undefined - For unassigned values

Object - For more complex data structures

Symbol - For unique identifiers

Question 27

JS Array Functions

Answer 27

map()

find()

findIndex()

filter()

reduce()

concat()

slice()

splice()

Question 28

JS Array Functions - find()

Answer 28

The find() method returns the value of the first element in the provided array that satisfies the testing function

const array1 = [5,12,8,130,44];

const found = array1.find(element=> element>10);

console.log(found);

ANS: 12

Question 29

JS Array Functions - findIndex()

Answer 29

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function

const array1 = [5,12,8,130,44];

const isLargeNumber = (element) => element>13;

console.log(array1.findIndex(isLargeNumber);

ANS: 13

Question 30

JS Array Functions - filter()

Answer 30

The filter() method creates a new array with all elements that pass the test implemented by the provided function

const words=[‘spray’,’limit’,’elite’,’exhuberant’,’destruction’,’present’};

const result=words.filter(word=>word.length>6);

console.log(result);

ANS: array[‘exhuberant’,’destruction’,’present’};

Question 31

JS Array Functions - reduce()

Answer 31

The reduce() method executes a reducer function (that you provide) on each element of the array resulting in a single output value

const array1=[1,2,3,4};

const reducer= (accumulator, current value) =>

accumulator + current value;

console. log(array1.reduce(reducer); ANS: 10
console. log(array1.reduce(reducer,5); ANS: 5

Question 32

JS Array Function - concat()

Answer 32

The concat() method is used to merge two or more arrays. This method doesn’t change the existing arrays, but instead returns a new array

const array1=[‘A’,’B’,’C’};

const array2=[‘D’,’E’,’F’};

const array3=array1.concat(array2);

console.log(array3);

ANS: array[‘A’,’B’,’C’,’D’,’E’,’F’];

Question 33

JS Array Functions - slice()

Answer 33

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in the array

const animals=[‘ant’,’bison’,’camels’,’duck’,’elephant’];

console. log(animals.slice(2)); ANS array[‘camels’,’duck’,’elephant’];
console. log(animales.slice(2,4)); ANS array[‘camels’,’duck’];
console. log(animales.slice(1,5)); ANS array[‘bison’,’camels’,’duck’,’elephant’];];

Question 34

JS Array Function - splice()

Answer 34

The splice() function changes the contents of an array by removing or replacing existing elements and / or adding new elements

const months=[‘jan’,’mar’,’apr’,’jun’,];

months. splice(1,0,’feb’); ANS: inserts at index 1
console. log(months); ANS array[‘jan’,’feb’,’mar’,’apr’,’jun’,];
months. splic(4,1,’may’); ANS replaces 1 element at index 4
console. log(months) ANS array[‘jan’,’feb’,’mar’,’apr’,’may’,];

Question 35

What is a component

Answer 35

a core building block of React

Question 36

Component Tree

Answer 36

Root => ‘App’

Question 37

What is JSX

Answer 37

Each component needs to return / render some jsx code –> it defines what HTML code react renders

Question 38

Getting started

Answer 38

install node.js

then install react

sudo npm install create-react-app -g

create-react-app name-of-your-app –scripts-version 1.1.5