Skip to content

Instantly share code, notes, and snippets.

@anshulrgoyal
Last active January 18, 2020 18:16
Show Gist options
  • Save anshulrgoyal/7f0f98ae3fb413a531b2596e76961265 to your computer and use it in GitHub Desktop.
Save anshulrgoyal/7f0f98ae3fb413a531b2596e76961265 to your computer and use it in GitHub Desktop.
Sample for session
npm i -g create-react-app
create-react-app session
cd ./session
npm start

Install Nodejs

  • Download node from this link
  • Install the package according to your os.
  • Install git and git bash from this link
  • Open Git Bash and run node -v to check if node is installed or not.
  • Check if npm is installed or not npm -v.

In any error window user use this link to install nvm

For Linux or Mac user please use this tool nvm

For Linux and Mac only

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
nvm install 12
nvm alias default 12
nvm use default
import React,{useState,useEffect,Component} from 'react';
import {TextField,Button} from "@material-ui/core"
import Grid from '@material-ui/core/Grid';
import List from "./list"
import './App.css';
// Advanced React
function App() {
const [list,setList]=useState([]);
useEffect(()=>{
const f=async ()=>{
const result=await fetch("https://api.github.com/users").then(res=>res.json());
setList(result);
};
f();
},[])
return <>
<Grid container>
<Grid item xs={6}>
<List items={list} />
</Grid>
<Grid item>
<UpdateList update={(val)=>{list.push({avatar_url:"",login:val});setList(Array.from(list))}} />
</Grid>
</Grid>
</>
}
const UpdateList=(props)=>{
const [val,setVal]=useState("");
return <>
<TextField label="User Name" onChange={(v)=>setVal(v.target.value)}
/>
<Button onClick={()=>{props.update(val)}}>Submit</Button>
</>
}
export default App;
// varaible declaration
var a=8;
a="anshul";
a=[3,4,5,6,6];
let lastName="goyal"
// object creation
a={
name:"anshul",
"age":21,
branch:"ce",
lastName,
subject:[{name:"dm"},"cn","soft skill","soft computing"]
}
// object destructuring
var {branch}=a;
let arr=["c",a];
const {name:firstName}=a;
// array destructuring
const [_,{subject:[{name:subjectName}]}]=arr;
// spread operator
const d={year:3,...a};
let newArr=[...arr,f:"foo"]
// function decration
function print(v){
console.log(v);
}
print(arr);
// function with return
function sum(a,b){
return a+b;
}
// arrow functions
const arrowSum=(a,b)=>{
return a+b;
}
// arrow with no return
const arrowNoReturnSum=(a,b)=>a+b;
// arrow with one argument
const isEven=num=>num%2===0;
// if you want to return object from arrow
const createObject=name=>({name})
// using function in object
const person={
name:"anshul",
// no name function
update:function(name){this.name=name},
}
// this keywoard reffer to the object the function is a part of and every thing in js is a part of global object or window
console.log(this.d)
// arrow functions donot have a this keywoard related to them
// closure
function closure(){
let i=0;
return ()=>i++;
}
// class
class Person{
name
constructor(name){
this.name=name
}
}
// inheritance
class Student extends Person{
branch;
constructor(name,branch){
super(name);
this.branch=branch;
}
}
// Array
const arr=[1,2,3,4]
// push
arr.push(3);
// pop
const ele=arr.pop()
// forEach
arr.forEach(ele=>console.log(ele));
// map
const newArray=arr.map(ele=>ele*2);
// map implementation(crude one)
function map(arr,fun){
let new_arr=[];
for(let i=0;i<arr.length;i++){
new_arr.push(fun(arr[i],i,arr));
}
return new_arr;
}
// filter
const filtedArray=arr.filter(ele=>ele%2==0);
// filter implementation(crude one)
function filter(arr,fun){
let new_arr=[];
for(let i=0;i<arr.length;i++){
fun(arr[i],i,arr)?new_arr.push(arr[i]):null;
}
return new_arr;
}
// reduce
const reduced_array=arr.reduce(arrowSum)
// reduce advanced
const reduced_array=arr.reduce((acc,ele)=>(acc[ele]=ele,acc),{});
// timers
const token=setTimeout(()=>console.log(400),1000);
setTimeout(()=>console.log(this),1000);
setTimeout(function(){console.log(this)},2000);
clearTimeout(token)
// produce different result
const token=setInterval(()=>console.log(400),1000);
clearInterval(token)
// strings
const str="anshul goyal";
const str_array=str.split(" ");
const n_str=["foo","bar"].join(" ";)
// template string
const tem=`anshul goyal ${age}`;
// js in tempalte string
const n_tem=`anshul goyal is ${Math.random()>.5?"good":"very good"}`
// power
const powerOF2=2**4;
// export imports
export arrowSums;
export default Student;
export Person;
import Student, {arrowSums,Person} from "./session"
// or
import JCBStudent from "./session";
// or
import {arrowSums as sum} from "./session";
// interview question in js
for(var i=0;i<5;i++){
setTimeout(()=>console.log(i),0);
}
// Promises
new Promise((resolve,reject)=>{setTimeout(resolve,1000)})
.then(()=>(console.log("hello from promise")))
.then((v)=>console.log("returned from then",v))
.catch(()=>console.log("error")).finally(()=>console.log("at the end"));
// async await
(async ()=>{
const wait=await new Promise(resolve=>setTimeout(resolve,10000));
console.log("After some times")
})()
// fetch
const result=await fetch("https://api.github.com/users").then(res=>res.json());
const result=await fetch("https://api.github.com/users",{method:"POST"}).then(res=>res.json());
// clever js uses
function person({name}={name:"anshul"}){
console.log(name)
}
person();
person({name:"anshul"})
function otherPerson(name,...b){
console.log(name,b);
}
// use of spread and rest
function promisify(fun){
return (...arg)=>Promise((resolve,reject)=>{
fun(...arg,(error,result)=>{
if(error){reject(error)}
else resolve(result)
})
})
}
// generator
function* makeRangeIterator(start = 0, end = 100, step = 1) {
let iterationCount = 0;
for (let i = start; i < end; i += step) {
iterationCount++;
yield i;
}
return iterationCount;
}
// for..of loop
for(let i of makeRangeIterator(12,15,2)){
console.log(i)
}
// symbols
var mySymbol = new Symbol(); //throws error
// symbols are premitives
// symbol creation
var mySymbol = Symbol("description for logging purpose")
// symbol are unique
const mySymbol1 = Symbol('some text');
const mySymbol2 = Symbol('some text');
mySymbol1 == mySymbol2 // false
// symbol created using for is Singlton
var mySymbol1 = Symbol.for('some key'); //creates a new symbol
var mySymbol2 = Symbol.for('some key'); // **returns the same symbol
mySymbol1 == mySymbol2 //true
// symbol can be name of property
{
[Symbol()]:()=>{},
}
// use of symbols
class Product{
value;
constructor(value){
this.value=value
}
[Symbol.search]=(string)=>string.includes(this.value)
}
"anshul goyal".search(new Product("anshul"));
// iterators
class Product{
values;
constructor(values){
this.values=values
}
[Symbol.iterators](){
let i=0;
return {
next(){
return {done:i===this.values.length-1,value:this.values[i++]}
}
}
}
}
// more use of generators
function *gen(a,b){
let k=yield a+b;
let m=yield k+a+b;
yield m+k+a+b;
}
// asyn iterators
let a=[Promise.resolve(1),Promise.resolve(2),Promise.resolve(3)];
for await(let i of a){
console.log(i);
}
class Product{
values;
constructor(values){
this.values=values
}
[Symbol.asyncIterator](){
let i=0;
return {
async next(){
return {done:i===this.values.length-1,value:this.values[i++]}
}
}
}
}
// the end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment