React JS Flashcards
Es6
EcmaScript 6 in 2011
JSX ?
JSX stands for Javascript Syntax Extension
Essentially, the HTML/XML code is ‘transpiled’ into JavaScript.
Syntactic sugar for HTML/xml.
what are SPA (Single Page Applications) ?
why SPA ?
html/css/js files are sent on the first request by Server and server just needs to concentrate on sending data (API calls -> ex: json ) rather than sending HTML/CSS/JS each time there is an event.
why SPA ?
DOM manipulations are done faster cuz there is no going back and forth API calls for UI renders
Ternary operators in React ?
used for conditional rendering of JSX .
You cannot use an if-else statement directly in JSX, but you can return early from the rendering function.
Returning null is valid in React when displaying nothing.
–> if else cannot be used directly in JsX
const showUsers = true;
if (!showUsers) {
return null;
}
return (
<ul>
{users.map(user => <li>{user.name}</li>)}
</ul>
);
--> using null::
<div>
{
showUsers ? (
<ul>
{users.map(user => <li>{user.name}</li>)}
</ul>
) : (
null
)
}
--> using &&
<div>
{
showUsers && (
<ul>
{users.map(user => <li>{user.name}</li>)}
</ul>
)
}
</div></div>
what is Object Destructuring & Spread Operators ?
Rather than assigning them to a variable one by one, you can use destructuring assignment in JavaScript
–assigning to variables
const id = student.ID; const name = student.name; const GPA = student.GPA;
– destructuring –
const student = {
ID: '21',
name: 'Jhon',
GPA: '3.0',
};
const {ID, name, GPA} = student;
what is Object Destructuring
Rather than assigning them to a variable one by one, you can use destructuring assignment in JavaScript
for example:–
const student = {
ID: '21',
name: 'Jhon',
GPA: '3.0',
};
–assigning to variables
const id = student.ID; const name = student.name; const GPA = student.GPA;
– destructuring –
const {ID, name, GPA} = student;
const {name:n} = student; [can add aliases : name aliased as n]
–keeping all object properties in rest and using it in destructuring
const { users, …rest } = this.state;
Spread operator ?
Spread Operator literally spreads the contents of an array into its elements which makes operations like concatenation etc. easier.
a = [1,2,3];
b = [4,5,6];
c = a.concat(b);
console.log(“c: “ + c);
using spread operator
a = [1,2,3];
b = [4,5,6];
c = [...a, ...b]; //spread operator
console.log("c: " + c);
In React, you can combine two objects using Spread Operator and add extra properties to that object too.
const new_object = { ...person, ...student, semester: '3'};
Arrow functions ?
Es6 feature -> Arrow Functions are a more concise way of writing a function in JavaScript. They are frequently used in React to make things more efficient and simpler (Event Handling, preventing bugs, etc.).
function getGreetingFunc() {
return 'Welcome to JavaScript';
}
// JavaScript ES6 arrow function with body
const getGreetingArrow1 = () => {
return 'Welcome to JavaScript';
}
// JavaScript ES6 arrow function without body and implicit return const getGreetingArrow2 = () => 'Welcome to JavaScript';
------------------------------
can be used for conditions in a more concise way
without arrow:
const students = [
{ ID: 1, present: true},
{ ID: 2, present: true},
{ ID: 3, present: false},
];
const presentStudents = students.filter(function(student){return student.present;});
console.log(presentStudents);
with arrow functions :
const students = [
{ ID: 1, present: true},
{ ID: 2, present: true},
{ ID: 3, present: false},
];
const presentStudents = students.filter(student => student.present); console.log(presentStudents);
As arrow function do not rebind this so it makes it easier for developers to debug the code and prevent any errors caused by making use of this within callbacks.
what are higher order functions
key concept of functional programming
a Higher-Order function is a function which returns a function
function doFilter(query) {
return function (user) {
return query === user.name;
}
}
using arrow
const doFilter = query => user =>
query === user.name;
map,reduce & filter ?
they are just JavaScript in HTML
map (transformation function):
it creates a new array with the results of calling a user-written function on every element in the calling array.
squared = notSquared.map( n => n*n );
filter:
named and default exports
import React, {Component} from ‘react’;
React is deafult and Component is named exports which are imported
different folders in a typical react setup ?
node_modules/: This folder contains all node packages that have been installed via npm. Since we used create-react-app, a couple of node modules are already installed. We’ll not touch this folder, since node packages are usually installed and uninstalled with npm via the command line
package.json : This file shows you a list of node package dependencies and other project configurations.
package-lock.json : This file indicates npm to break down all node package versions. We’ll not touch this file.
public/ : This folder holds development files, such as public/index.html. The index file is displayed on localhost:3000 when the app is in development or on a domain that is hosted elsewhere. The default setup handles relating this index.html with all the JavaScript from src/.
Promises ?
Promises are introduced in es6 which help in asynchronous calling of API s and combining callbacks ..
Note this can cause callback hell ..
new Promise (resolve , reject )
React DOM , VIRTUAL DOM , REAL DOM ?
ReactDOM.render
React dom is responsible for compare and match of elements in real dom Vs Virtual DOM and update the REAL realDOM only those elements which have changed .
This is helpful in efficiency as rather than update element by element it can update multiple elements at once .
Virtual DOM Is the DOM created by React library .
Note:- DOM Is just tree representation of an HTML page
What is a Component ?
React componentslet you break up the user interface into separate pieces that can then be reused and handled independently.
A React component takes an optional input and returns aReact elementwhich is rendered on the screen.
A React component can be either “stateful” or “stateless.”
“Stateful” components are of theclasstype, while “stateless” components are of thefunctiontype.
