Scribd
Upload
11 views

Inp Code

The document discusses various topics related to JavaScript, React, Node.js, and Express including: 1. How to install and uninstall npm modules locally and globally. 2. JavaScript concepts like variables, conditional statements, loops, arrow functions, promises, and more. 3. React topics such as function and class components, props, state, refs, and React animation. 4. Node.js concepts including the event loop, file system, callbacks, and creating an HTTP server.

Uploaded by

Muzammil Baloch
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Inp Code

The document discusses various topics related to JavaScript, React, Node.js, and Express including: 1. How to install and uninstall npm modules locally and globally. 2. JavaScript concepts like variables, conditional statements, loops, arrow functions, promises, and more. 3. React topics such as function and class components, props, state, refs, and React animation. 4. Node.js concepts including the event loop, file system, callbacks, and creating an HTTP server.

Uploaded by

Muzammil Baloch
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

1.

Xml

2. Xml dom

3. useState

4. useEffect
5. How to install and uninstall different modules using npm?

Removing a local package from your node_modules directory


npm uninstall lodash

Removing a local package without removing it from package.json


npm uninstall --no-save lodash

Uninstalling global packages


npm uninstall -g jshint

npm install sax


1. Keywords ::
const , let & var

2. Condition statements if else else if


IF
if (hour < 18) {
greeting = "Good day";
}

else
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

Else if
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

3. Switch
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}

4. Default

5. Loops defined and undefined :: ::


a. For
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}

b. For in
const person = {fname:"John", lname:"Doe", age:25};

let text = "";


for (let x in person) {
text += person[x];
}

c. For of
const cars = ["BMW", "Volvo", "Mini"];

let text = "";


for (let x of cars) {
text += x;
}

A. While
while (i < 10) {
text += "The number is " + i;
i++;

B. Do While
do {
text += "The number is " + i;
i++;
}
while (i < 10);
6. Generator ::
function* gen1(){
yield 200,
yield;
yield 300;
}
Var mygen=gen1();
console.log(mygen.nest().value);
console.log(mygen.nest().value);
console.log(mygen.nest().value);

7. Arrow ::
Var myfun=function display(){
console.log(“function expression”);
}

Var myfun1=function(){
console.log(“anonymous expression”);
}

Var myfun2=()=>{
console.log(“arrow expression”);
}

8. Promise ::
promise.all([
new promise(resolve=>setTimeout(()=>resolve(1),3000))
new promise(resolve=>setTimeout(()=>resolve(2),2000))
]).then(alert)

9. Npm installation
https:/nodejs.org/en/download

10. Props and state


11. Function component and class component
const Car=()=> {
return <h2>Hi, I am also a Car!</h2>;
}

class Car extends React.Component {


render() {
return <h2>Hi, I am a Car!</h2>;
}
}

12. Single page installation


npx create-react-app app-name
npm install react-router-dom
3. Wrapping The App Component

13. React hello world


npx create-react-app foldername
cd foldername
yarn start

Inside app.js include


function App() {
return <h1> Hello World! </h1>
}
export default App;

14. React animation


Npm install react-transition-group –save

15. Create ref


import React, { useRef } from "react";
const ActionButton = ({ label, action }) => {
const buttonRef = useRef(null);
return (
<button onClick={action} ref={buttonRef}>
{label}
</button>
);
};
export default ActionButton;
16. Redux install
# NPM
npm install redux

# Yarn
yarn add redux

17. Blocking and non blockiong::


nb
Const fs=require(“fs”);
fs.readFile(“mongo.js”,(err,data)=>{
if(err) throw err;
console.log(“data”)
});
console.log(“hello”); //hello <buffer>

B
Var http=require(“http”);
Const data = fs.readFileSync(“”mongo.js”);
console.log(data);
console.log(“hello world”);
//<buffer>
//hello world

18. Node.js hello


var http = require('http');

http.createServer(function (req, res) {


res.writeHead(200, {'Content-Type': 'text/html'});
res.end('Hello World!');
}).listen(8080);
Console.log(“server is up and running at http:/127.0.0.1:8080”);

19. Event loop


console.log(“this is the first statement”);
setTimeout(function(){
console.log(“this is the second statement”);
},1000);
console.log(“this is the third statement”)
20. Nodejs file system
Read Files: fs.readfile()
Create: fs.open()
Update: fs.writeFile(), fs.appendFile()
Delete: fs.unlink()
Rename: fs.rename()

fs.readFile(filename,[option],callback)

21. Callbacks
Function createQuote(quote,callback){
Var myquote=”my name’+quote;
callback(myquote);
}
Function logquote(quote){
console.log(quote);
}
createQuote(“muzammil”,logquote)

22. Express generator


Npm install express-generator -g
Express <your-express-app-name>

23. Lifecycle
1.initial phase
getDefaultProps()
getInitialStates()

2. Mounting phase
componentWillMount()
componentDidMount()
render()

3. Updating phase(optional)
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

4. Unmounting
componentWillUnmount()

24. Express hello


25. cookies
npm install --save cookie-parser

26. Buffer and stream


Buffer
Buf = new Buffer(26)
for(var i=0; i<26; i++){
buf[i]=i+97;
}
console.log(buf.toString(“ascii”));
console.log(buf.toString(“ascii”,5));
console.log(buf.toString(“ascii”,5,10));

Steam
Const fs=require(‘fs’);
Const file=fs.createWriteStream(“file.txt”);
for (let i=0; i<100; i++){
fileWrite(“hello world”);
}
file.end()

27. Express installation


Cd appname
Npm init
Npm install express –nosave

You might also like