useRef and useEffect in React

 app.js

import React, {useRef, useEffect, useState} from 'react'

import {Link} from 'react-router-dom'

// React -> will re-render (props/state)

export default function Home(props){

    // Google Captcha

    const h1Ref = useRef()

    const [counter, setCounter] = useState(0)

    const [counter2, setCounter2] = useState(0)

    useEffect(() =>{

        //fetching course information -> when the URL changes

        console.log(h1Ref)

    }, [counter2])

    return (

        <div ref={h1Ref}>

         <h1>{counter}</h1>

         <h1>{counter2}</h1>

         <button onClick={ ()=> setCounter(counter => counter+1)}> Counter 1</button>

         <button onClick={ ()=> setCounter2(counter => counter+1)}> Counter 2</button>

            

    </div>

    )

}

Parameterized Routing in React

 App.js

 import React from 'react'

 import {

  BrowserRouter as Router,

  Switch,

  Route,

  Link

} from 'react-router-dom'

import Home from './components/Home'

import About from './components/About'

import Greet from './components/Greet'

// Home.js -> Header.js + Content.js + Footer.js

// Blog.js -> Header.js + Comments.js + Footer.js

function App() {

  return(

      <Router>

        <Switch>

          <Route path="/" exact component={Home} />

          <Route path="/about" exact component={About} />

          <Route path="/greet/:name" exact component={Greet} />

        </Switch>

      </Router>

  )

}

export default App

Components -> Home-> index.js

import React from 'react'

import {Link} from 'react-router-dom'

export default function Home(){

    return <h1>Home. Go to <Link to="/about">About</Link></h1>

}

Components -> Greet-> index.js

import React from 'react'

import {useParams} from 'react-router-dom'

export default function Greet(){

    const params = useParams()

    console.log(params)

return <h1>Hello {params.name}</h1>

}

Components -> About-> index.js

import React from 'react'

export default function About(){

    return <h1>About</h1>

}

List in React

 App.js

 import React from 'react'

// Home.js -> Header.js + Content.js + Footer.js

// Blog.js -> Header.js + Comments.js + Footer.js

const arr = [{

  name: 'Prabin',

  rollnumber: 1

}, {

  name: 'ABC',

  rollnumber: 2

}]

function App() {

  return(

      <ul>

        {arr.map(elem => <li key={elem.rollnumber}>

          {elem.rollnumber} - {elem.name}</li>)}

      </ul>

  )

}

export default App

Props in React

App.js

 import React from 'react'

// Home.js -> Header.js + Content.js + Footer.js

// Blog.js -> Header.js + Comments.js + Footer.js

//null, numbers, HTML, strings, arrays

function GreetComponent(props){

  return <div>

  <h1> Hello {props.name}</h1>

  {props.children}

  </div>

}

function App() {

  return(

    <GreetComponent name="Mehul" children="222">

        <p>This code still works</p>

      </GreetComponent>

  )

}

export default App

Github and Visual Studio Code

 0:39 Step 1 : Install git on your system

2:46 Step 2 : Create account on github - https://github.com/ 3:27 Step 3 : Create a repository on github & copy url 4:25 Step 4 : Goto VS Code and open project/folder note : check git is enabled from settings 5:54 Step 5 : Goto source control section & click on git icon 6:52 Step 6 : Give commit message & Commit the changes 8:00 Step 7 : Add remote repo (github repo) 9:15 Step 8 : Push commited changes to github repo 10:03 Step 9 : Check changes on github repo 13:05 How to clone from GitHub 14:50 Remove project from Git If you face any issues, also watch - https://www.youtube.com/watch?v=F80Ps... 1. How to add an existing vs code project to git and github 2. How to do commit and push whenever changes happen 3. How to clone from github to vscode 4. How to remove project from git

20 Digits of Pi in JSX

import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
const math = (
 2 + 3 = {2 + 3} 
);
ReactDOM.render(math,
document.getElementById('app')
  );

Git & GitHub Crash Course: Create a Repository From Scratch!

git clone URL

git status

git add README.md

git status

git commit -m "Initial commit"

git push origin master

git add index.html (adding to git after creating index.html)

git diff README.md (what lines have changed)

git commit -m "Second commit" (m stands for message here)

git log

git checkout README.md (undo if you mess up your code)

https://www.udemy.com/course/git-and-github-crash-course-creating-a-repository-from-scratch/learn/lecture/16293114#overview

Making Circle from Square in Python using turtle module

import turtle

my_turtle = turtle.Turtle()

def square(length, angle):
    for i in range(4):       
        my_turtle.forward(length)
        my_turtle.right(angle)

for i in range(50):
    my_turtle.right(10)
    square(100,90)

Visit Count Session in Node and Express

        if(!request.session.visitcount){

            request.session.visitcount = 0;

        }

        request.session.visitcount += 1

        console.log(`Number of visits: ${request.session.visitcount}`)

Install ESlint and Prettier for Nodejs in Visual Studio

ESlint

npm install -d eslint

npx eslint --init

Middleware apply in express to search for matching files like missing css/images

app.use(express.static(path.join(__dirname,'./static')))

Node JS Tricks

• If Cannot install thirdparty application via terminal, you will need package.json file for that.

To install package.json file, write this in your terminal

npm init

• For automated loading of console in visual code or other text editor, you need to install nodemon. For that, you need to install globally with keyword -g

npm install -g nodemon 

• To access in console bar with nodemon, write this in terminal
  nodemon .\demo.js
• If  You see the error while running nodemon, Visual studio code cmd error: Cannot be loaded because running scripts is disabled on this system, follow this link

Simple Test and Async Test with Jasmine

npm install --save-dev jasmine

./node_modules/.bin/jasmine init

npm install --save-dev request

Get Local IP In node.js

'use strict';

var os = require('os');
var ifaces = os.networkInterfaces();

Object.keys(ifaces).forEach(function (ifname) {
  var alias = 0;

  ifaces[ifname].forEach(function (iface) {
    if ('IPv4' !== iface.family || iface.internal !== false) {
      // skip over internal (i.e. 127.0.0.1) and non-ipv4 addresses
      return;
    }

    if (alias >= 1) {
      // this single interface has multiple ipv4 addresses
      console.log(ifname + ':' + alias, iface.address);
    } else {
      // this interface has only one ipv4 adress
      console.log(ifname, iface.address);
    }
    ++alias;
  });
});

// en0 192.168.1.101
// eth0 10.0.0.101

How To Connect Request Post on Node.js Localhost?

Index.js
/*
 *Primary file for the API
 *
 */
 // Dependencies
 const http = require('http');

 const server = http.createServer((req, res) =>{
  if (req.url === '/'){
  res.write('Hello World');
  res.end();
  }
 });

 //The server should respond to all requests with a string
server.listen(3000);

console.log('Listening on port 3000');

Then run on CMD Terminal

node index.js