Laravel

 What is Composer
---------------------------------------------------------------

https://getcomposer.org/

go to cmd type-> composer -V (to check composer installed or not)

go to cmd type-> composer self-update

go to cmd type-> composer self-update --rollback(to reinstall old version)

Composer ek aisa software hai jo web development ke liye use hota hai. Ye ek dependency management tool hai jo PHP programming language ke projects mein use hota hai. Composer ke through aap third-party libraries ko manage kar sakte hain, jaise ki frameworks, packages, aur plugins.

Composer, PHP mein project dependencies ko track karta hai aur unhe manage karne mein madad karta hai. Iske dwara aap kisi bhi library ko apne project mein easily add, update, aur remove kar sakte hain. Ye ek command-line tool hai, jise aap apne project directory mein run karke use kar sakte hain.

Composer, "composer.json" file aur "composer.lock" file ke saath kaam karta hai. "composer.json" file mein aap apne project ke dependencies, version constraints, aur autoloading rules specify kar sakte hain. "composer.lock" file mein exact versions aur dependencies ki information hoti hai, jo ek consistent development environment create karne mein help karti hai.

Composer, PHP community mein bahut popular hai aur widely used development tool hai. Ye ek powerful aur flexible way hai PHP projects ke dependencies ko manage karne ka. Iske through aap apne project ke liye required libraries ko easily install kar sakte hain aur dependency conflicts ko resolve kar sakte hain.

How to install Laravel

Step 1- Install XAMPP

Step 2- Composer

Step 3- open command line and type => composer global require laravel/installer

Create a new Laravel application enter project name

Step 4- go to xampp->htdocs folder => and type cmd in path and press enter

Step 5- laravel new folder_name(laravelfirstapp)

Step 6- laravel installed finally -> type cd laravelfirstapp

Step 7- type cls (clear screen)

Step 8- type ->php artisan serve (load project in port http://127.0.0.1:8000)

Java Script ES6

//use of var keyword-> variable scope globally

console.log(name);

var name="lalit";

   name="abc";

console.log(name);

name="test";

console.log(name);

//use of let keyword-> variable scope within the block

//console.log(name);

let name="lalit";

   name="abc";

console.log(name);

name="test";

console.log(name);

//use of const keyword-> variable can not possible reassign

//console.log(name);

const name="lalit";

console.log(name);

name="test";

console.log(name);

*********************************************

//Function Declaration ES5

function greet(name) {

  return "Hello" + " " + name;

}

console.log(greet("lalit"));

//Function Declaration ES6 (Arrow Function)

const greet= (name) => {

  return "Hello There" + " " + name;

};

console.log(greet("Lalit"));

or

const greet= name => { //put code here };

//Function Declaration Multiple Parameter ES6 (Arrow Function)

const greet= (name,age) => {

  return "Hello There" + " " + name + " " + age;

};

console.log(greet("Lalit",30));

//Function Declaration Single Parameter ES6 (Arrow Function)

const Sqr = num => {

  return num*num;

};

console.log(Sqr(6));

or write this

const Sqr = num => num*num;

console.log(Sqr(6));

*******************************

//this Keyword  with Arrow Function

//ES5

const person = {

  test(){

  console.log(this);

},

};

person.test();

--------------------------------------------------------------------------

const person = {

  test(){

    var self = this;

    setTimeout( function(){

        console.log(self);

    }, 2000);

},

};

person.test();

ES6

const person = {

  test(){

    //var self = this;

    setTimeout(() => {

        console.log(this);

    }, 2000);

},

};

person.test();

*******************************

//Template Literals

-ES5

var name = "lalit";

console.log("welcome to" + " " + name + " ! Have a nice day");

-ES6 -> use tiled symbol and ${varname}

const name1 = "lalit";

console.log(`welcome to ${name1} ! Have a nice day`);

//Print Multiline string in JS

-ES5

//var name = "lalit";

//var res = "Welcome \n to "+name;

//console.log(res);

-ES6

const name = "lalit";

const res = `welcome to Blue 

world mandhana

${name}`;

console.log(res);

*************************************************

Objects Destructing in

-ES5

var details = {

     name: "lalit",

     contact: "1238899",

     email: "abc@gmail.com"

   }

var name = details.name;

var contact = details.contact;

var email = details.email;

console.log(name);

console.log(contact);

console.log(email);

-ES6

let detailsNew = {

     name1: "lalit",

     contact1: "1238899",

     email1: "abc@gmail.com"

   }

const {name1:company_name,contact1,email1} = detailsNew;

console.log(company_name);

console.log(contact);

console.log(email);

************************************

//Array Destructing in

-ES5

var arr = ["A1","A2","A3","A4"]

var v1 = arr[0];

var v2 = arr[1];

var v3 = arr[2];

var v4 = arr[3];

console.log(v1);

console.log(v2);

console.log(v3);

console.log(v4);

-ES6

var arres6 = ["B1","B2","B3","B4"];

let [var1,var2,var3,var4] = arres6;

console.log(var1);

console.log(var2);

console.log(var3);

console.log(var4);

************************************

Spread Operator

//const oldArray = [1,2,3,4,5];

//const newArray = ["A","B","C",...oldArray,6,7,8,9,10];

//console.log(newArray);

Rest Operator  with limited same as parameter value

const sum = (a,b,c,d) => a+b+c+d;

console.log(sum(1,2,3,4));

//console.log(sum(1,2,3,4,5,6,7)); not handle more than parameter(4) value

Rest operator with infinite value

const sum = (...numbers) => {

  let total = 0;

  numbers.forEach((n) => {

    total += n;    

  });

  console.log(total);

}

sum(1,2,3,4,5,6,7,8)

************************************

//Array Map Method

const courses = ["PHP", "ReactJS", "AngularJS", "JavaScript"];

const newCourses = courses.map((c) => {

  return `<li> ${c} </li>`;

});

console.log(courses);

console.log(newCourses);

--------------------------

const series = [1,2,3,4,5,6,7,8,9,10];

const num = 5;

const table = series.map((s) => s*num );

console.log(table);

************************************

-------

English Speaking

create an image in mind and speak in English use present Indefinite, Past Indefinite (2nd form), present continuous (4th form)

1- Use Go

-----------------------------------

I go to Market.

I got to School.

I got to Hospital.

I go to Jim.

I go to Zoo.

2- Use eat(have)

-----------------------------------

I have Breakfast daily.

I have my lunch with my family.

I have dinner with friends.

3- Use Play

-----------------------------------

I play footbaal daily.

I play cricket.

I play Ludo.

I play Online Games.

I play Outer Games

4- Use Watch (kisi ko observe kerke dekhna)

----------------------------------------------

I Watch youtube video.

I watch movies.

I watch News.

5- Use See (achanak se dekhna)

----------------------------------------------

I saw beautiful girl.

I saw beautiful building.

6- Use Look at (eyes ko direction dena)

----------------------------------------------

look at this beautiful girl.

look at this beautiful building.

look at this car.

7- Use Read (kya-2 cheese hai padne wali- Nowels, Magzines)

-------------------------------------------------------

I read Nowels

I read Magzines

I read Newspapers

I read Indian Express Newspaper 

**************************************

How to remove scrollbar bottom border in any section

==============================================

50 English Phrases https://www.youtube.com/watch?v=BS9Tfg1On1A

All Tenses in English Grammar https://www.youtube.com/watch?v=67TgyZQaig4

**********************************************

Basic Spoken English course 2023 (5 day course)

----------------------------------------------------

https://www.youtube.com/watch?v=UfXaMhJ9r2o

**********************************************************

React JS

 How to Convert any HTML website to React JS

---------------------------------------------------------------

https://www.youtube.com/watch?v=NSyCRfUzMb0

https://www.youtube.com/playlist?list=PLXIf5ibIbJuz_e3m6M2WMKrLUFIY2y23A

When (start) Create first React JS program need to install some software

1- node js download & install (nodejs.org)

2- Visual studio editor download & install

3- set location where want to create project eg-> D drive:/ -> Create folder->reactsample (go to under folder and press shift + right click mouse= open powershell windo here)-> selecting path-> and just write cmd and press enter 

4- and write react app creation type command->npx create-react-app firstapp

5- selecting path-> and just write cmd and press enter-> type command->code space dot(code .)-> then open all project folders & files in visual studio

6- now go to terminal-> new terminal and type here-> npm start -> now start development server -> default url localhost:3000

7- now go to FirstApp->src->App.js and edit code after the logo to check code is working

8- go PowerShell type->go to project folder-> cd my-app(folder name)

go PowerShell run project->npm start

go run the project using vs code-> view-> Terminal

Local - http://localhost:3000

On Your Network - http://192.168.1.10:3000

Points covered :

- Download Html website template 

- Create React application from create-react-app

- Add all folders from html website template to react project

- Add Html code into reactjs app

- Correct all comments , Images , In put fields , Hr , Br tags.

- Finally run the reactjs app.

***************************************************************

React First demo App  (How to Setup ReactJS Project using CDN Links)

------------------------------------

<!DOCTYPE html>

<html>

<head>

  <title>React Demo</title>

  <meta charset="UTF-8">

  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <!--<script src="assests/babel.min.js"></script>-->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>

    <!--<script src="assests/react.development.js"></script>-->

 <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!--<script src="assests/react-dom.development.js"></script>-->

</head>

<body>

<div id="root"></div>

<script type="text/babel">

class App extends React.Component {

  render() {

     return (

     <div>

  <h1> Hello React JS Demo</h1>

    </div>

             );

          }

                                  }

 ReactDOM.render(<App />, document.getElementById("root"));

  </script>

</body>

</html>

*****************************************************

REACT TRANING

https://onedrive.live.com/redir?resid=288165385EEB6B14%21131&authkey=%21AL98gGTAABIAWnI&page=View&wd=target%28React.one%7C6be36bff-da06-4846-943f-b37ed1804c7e%2FReact%20Notes%7C512a80bf-da2f-466b-bf60-b955f483e32f%2F%29&wdorigin=NavigationUrl

******************************************

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. Web Components aims to solve such problems — it consists of three main technologies 1. Custom elements- A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface. 2. Shadow DOM- A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document. 3. HTML templates The template and slot elements enable you to write markup templates that are not displayed on the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

-------------------------------------------------------------------------------

Create New React Component

------------------------------

Step 1- Go to project folder -> my-firstapp-> src

Step 2- under src folder create Lalit.js component same as App.js

 -----lalit.js-------

  import './App.css';

function Lalit() {

  return (

    <div className="Lalit">

      <header className="Lalit-header">

         <h1>React Heading  lalit </h1>

<p>React testing description</p>

      </header>

    </div>

  );

}

export default Lalit;

-------------------------------------

Step 3- go to index.js and import component

       import Lalit from './Lalit';

 and call component syntax

 <Lalit />

********************************************