Git Getting Started Guide

Overview

  • Basics-1

    How React Works Behind the Scenes <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <title>React Test</title> </head> <body> <div id="root"> Not Rendered </div> <script src="https://unpkg.

  • Benifit of Using React

    https://jscomplete.com/playground/rgs1.8 const render = () => { document.getElementById("mountNode").innerHTML = ` <div> Hello HTML <input /> <pre>${new Date().toLocaleTimeString()}</pre> </div> `; ReactDOM.render( React.createElement( "div", null, "Hello React", React.createElement("input", null), React.createElement("pre", null, new Date().

  • Modern Javascript Crash Course for Reactjs developers

    Object Literals template-strings const greeting = "Hello World"; const answer = "Forty Two"; const html = ` <div> ${Math.random()} </div> `; html; Classes class Person { constructor(name) { this.name = name; } greet() { console.

  • Puppeteer

    <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./style.css" /> <title>React Test</title> </head> <body> <div id="root">Not Rendered</div> <script src=".

  • Puppeteer

    Learning Path Official Links Offical Puppeteer Page

  • Puppeteer

    Learning Path Official Links Offical Puppeteer Page

  • React Data Flow Basics

    One way data flow and Reuseability from parent to child only function Button(props) { // const handleClick = () => setCounter(counter+1); return <button onClick={props.onClickFunction}>+{props.increment}</button>; } function Display(props) { return <div>{props.message}</div>; } function App() { const [counter, setCounter] = useState(0); const incrementCounter = () => setCounter(counter + 1); return ( <div> <Button onClickFunction={incrementCounter} increment={1} /> <Button onClickFunction={incrementCounter} increment={5} /> <Button onClickFunction={incrementCounter} increment={10} /> <Button onClickFunction={incrementCounter} increment={100} /> <Display message={counter} /> </div> ); } ReactDOM.

  • React Hooks

    React hooks are used to manage the state of the componenets. useState() is one of special react hooks function. useState() return two objects a) state object(getter) b) updater function(setter)

  • Tooling for React

    Prettier Install nodejs and npm npm init -y npm install -D prettier in root directory add file named .prettierrc, this is Prttier configuration file. in this file just type empty object {}, which means you accept all the defaults, in package.

I will get back to you ASAP.