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.
Unidirectional dataflow
React uses Uni directional data flow
Which means the parent components we cannot pass state to.
CORS
CORS is a security mechanism that allows a web page from one domain orOriginto access a resource with a different domain (across-domain request).
ORIGIN :
Originincludes the combination ofprotocol, domain,andport
for more : https://www.moesif.com/blog/technical/cors/Authoritative-Guide-to-CORS-Cross-Origin-Resource-Sharing-for-REST-APIs/
State Vs Props
State is something which can be user input
Props is passed down to components
How to give some input in html ?
Explain event onChange?
‘console.log(e)}/>’
input: HTML attribute it can have value Search , password etc..
e is synthetic event
e.target is the target element on which the event occurs… here it is the HTML element itself
e.target.value it is the string value that target holds
Let’s say in search box you type something, that string is the value
onChange is a synthetic event and is JSX attribute
this.setState ?
We shouldn’t use this. State to directly update the state of a component, infact use this.setState which is an asynchronous function so it will not block the user.
Also never add this.setState inside render() function
As this.setState will invoke render function and if we add setState inside render it will just go on LOOP
Html Events Vs synthetic events ?
Synthetic event is a react event which occurs when a user input or click etc.. events happen
This is not the actual DOM event happening
What does create react app do ?
It has all the packages to create a react app
It will create a public folder where we keep our html css etc..
Src directory which contains our Javascript files which we code
Babel converts new Js into older js which is compatible with all browsers
Webpack
package.json : dependencies
import React , {Component}from ‘React’
TBD
Functional component Vs Class component
Stateless component can use functional style of writing the js files . They just can get some props and render HTML
State full components use class style of writing
class App extends Component{}
class components get life cycle methods like componentDidMount etc..
extends Component :
This will give us access to render() , life cycle methods etc….
