NPM : Node package Manager

- Packages for external modules.
- Bits of reusable codes that is written by someone.

1) cd <folderName>
2) npm init : Initialised npm and also creates the package.json file
3) npm install <packageName1> <packageName2> : Install the package name using npm
4) npm install -g nodemon : install nodemon globally using npm
5) npm install body-parser: 
6) npm install ejs:

Package.json file :-
Description of all the npm packages inside your file

Mongo DB

1. show dbs: show database names  

<!--Create Database & records—>

1. use [Database_Name] : create/switch to database 
2. db : show your current db
3. db.[tableName].insertOne({_id: 1, name: “Pen” }) : insert new record
4. show collections : show all the tables in the db 

<!— Read Database  —>

1. db.products.find() : select all records in the table “products”
2. db.products.find({ [column_name] : [value] }) : search a specific column and display all records. 
3. db.products.find({ price : {$gt: 1}}) : select * where price > 1 
4. db.products.find({ [column_name] : [value}, { [fields that we want back] })

<!— Update records—>

1. db.[tableName].updateOne({ [column_ name] : [field] }, {$set: { [column_name] : [value] }})
2. db.products.find() : select all records in the table “products”

<!— Delete records—>

1. db.[tableName].deleteOne({ [column_name] : [value]})
2. db.products.find() : select all records in the table “products”

<!— Relationship —>

1 Rubber to M review

On Mac

[Connect MongoDB to node.js]

1.  mkdir [folderName] : make a new directory
2. cd [folderName] : change directory
3. touch app.js : create a new file “app.js"
4. npm init -y: say yes to everything for npm init
   
5. npm i mongodb : install mongodb driver
6. code app.js : Open up app.js file in vscode.

Git Command [Working Directory to Local Repository]

1. cd to your local directory
2. git init : Initialised git   
3. ls -a : to view all the hidden files
4. git status : to check what files are inside the staging area
5. git add [filename.txt] : add files to the staging area
6. git rm —cached -r : to remove everything from the staging area
7. git status: to check what files are inside the staging area 
8. git commit -m “initial files” : commit files in the version control  
9. git log : see what commit has been made        

[If there is edits made to the files]

1. cd to your local directory
2. git status : to check what files are inside the staging area
3. git add . : add all files to the staging area
4. git status : to check what files are inside the staging area
5. git commit -m “initial files” : commit files in the version control  
6. git log : see what commit has been made
7. git diff [filename] : see what difference between current version and last save point     
8. git checkout [filename]:rollback to the previous versiong

[Compare the codes of your files in your working directory]

1. cd to your directory you have committed
2. git add . : git add all files
3. git diff . : check the difference between current version and last save point

Git Commands [Local Repository to Remote]

1. Create a repository in GitHub
2. Cd to the working directory folder you wanna commit eg Story
3. git log : to check for previous commits   

[Push commit to GitHub]

1.  git remote add origin [URL git directory] : create a remote
2. git push -u origin master: push our local repository to remote repository

[if got edit files]

1. git pull
2. git push -u origin master: push our local repository to remote repository

Git Commands [.gitignore file]

1. cd to your working directory
2. touch .gitignore : create a file called .gitignore 
3. ls -a : view hidden file inside console
4. open .gitignore : Open file and include the filename to be ignored
5. git init : Initialised git   
   
6. git status : to check what files are inside the staging area
7. git add [filename.txt] : add files to the staging area
8. git status : to check what files are inside the staging area
9. git commit -m “initial files” : commit files in the version control  

Inside the .gitignore file

• add files that wanna be ignored when adding and commit to git
• # for commenting
• *.txt : all the files with txt extension will be ignored

Git commands [Branching & Merging]

1. cd to your working directory
2. git log : see what commit has been made
3. git branch [branch_name] : create a new branch
4. git branch : list out all the branches (* shows you what branch you’re on)
5. git checkout [branch_name] : switch branch
6. git add .
7. git commit  -m “[message]”
8. git log
9. git merge [branch_name] 
10. git push origin [branch_name] -u

Regular Function vs Arrow Function

Regular Functions

1. May or may not have a name, can be anonymous
2. With name may be hoisted eg can declare function in a specific scope and call that function before its actually declare
3. Able to have access the arguments

Arrow Functions

1. always anonymous
2. Cannot be hoisted
3. Doesnt have own this so in arrow function, variables will be borrowed or taken from out of context.It may be useful in some node. It will refer to window like the global object hence you can’t perform some changes like the button or the dropdown menu
4. Doesnt have access to arguments
5. assign arrow function to variables and declaration of variables using const
6. Usually used as callback functions which is a function that is passed as a argument in a call to another function cos callback function dont required to be named.
7. Can be used as an immediately invoked arrow functions.

Declarative Programming vs Imperative Programming in React

 Declarative Programming 

Example 1
[in App.js]

var isDone = true;

  const strikeThrough = {textDecoration : "line-through"}

  return <p style={isDone ? strikeThrough : null}>Buy Milk</p>

 Imperative Programming

Example 1
[in index.js]

document.getElementById("root").style.textDecoration = "line-through";

Example 2 
[in App.js]

function strike(){

  document.getElementById("root").style.textDecoration="line-through";

}

function unstrike(){

  document.getElementById("root").style.textDecoration=null;

}

function App() {

  return(

    <div>

  <p>Buy Milk</p>

  <button onClick={strike}>Change to strike through</button>

  <button onClick={unstrike}>Undo</button>

  </div>

    ) };

Permission Error when trying to create new react app

npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\5f495f30
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\5f495f30'
npm ERR!  [OperationalError: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\5f495f30'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\5f495f30'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'open',
npm ERR!     path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\5f495f30'
npm ERR!   },
npm ERR!   isOperational: true,
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\5f495f30'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the  
npm ERR! permissions of the file and its containing directories, or try running     
npm ERR! the command again as root/Administrator.
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\21bcf4ec
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\21bcf4ec'
npm ERR!  [OperationalError: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\21bcf4ec'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\21bcf4ec'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'open',
npm ERR!     path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\21bcf4ec'
npm ERR!   },
npm ERR!   isOperational: true,
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\21bcf4ec'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the  
npm ERR! permissions of the file and its containing directories, or try running     
npm ERR! the command again as root/Administrator.
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\2deddd01
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\2deddd01'
npm ERR!  [OperationalError: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\2deddd01'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, open 'C:\Users\pc~1\AppData\Roaming\npm-cache\_cacache\tmp\2deddd01'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'open',
npm ERR!     path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\2deddd01'
npm ERR!   },
npm ERR!   isOperational: true,
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'C:\\Users\\pc~1\\AppData\\Roaming\\npm-cache\\_cacache\\tmp\\2deddd01'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the  
npm ERR! permissions of the file and its containing directories, or try running     

npm ERR! the command again as root/Administrator.

Solution:- 
1) run npm config edit in command prompt
-  change this line to ; cache=C:\Users\pc\AppData\Roaming\npm-cache

2) run npm uninstall -g create-react-app in command prompt as admin mode

3) npx create-react-app <folderName> : create a new react app

4) cd <folderName>

5) npm start : launch react app

Basic commands

 [Window]
1) dir : list out all the files and folder inside the directory
2) dir /w : dispay text horizontally 3) npm config edit : enter into your config file
4) echo "" >.gitignore : create a new file .gitignore

[Mac]

1) ls : list out all the files and folder inside the directory

Create new React App

 [Windows - run in admin mode]

1) Open Command Prompt/Hyper and run as administrator
2) cd <directoryName> :  Change directory to the folder where you want to store your react app.
3)  npx create-react-app <folderName> : create a new react app 4) cd <folderName> : Change directory. 5) npm start : To launch your react app

[Window - non admin mode]

1) Open Command Prompt/Hyper terminal
2) npx create-react-app <fileName> : Create a new react App
3) cd <folderName> : Change directory. 4) npm start : To launch your react app