How to add a @tailwind CSS rule to css checker

 https://stackoverflow.com/questions/47607602/how-to-add-a-tailwind-css-rule-to-css-checker

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')
  );