React JSX

Tarihçesi
React'ın tarihçesi şöyle.

React.js is an open source JavaScript library created by Facebook in 2011 for building dynamic user interfaces. React is based on JavaScript and JSX, a PHP extension developed by Facebook, that allows for the creation of reusable HTML elements for front-end development. React has React Native, a separate cross-platform framework for mobile development.

JSX Nedir
Açıklaması şöyle.

React uses JavaScript ES6+ and JSX script. JSX is a syntax extension for JavaScript used to simplify UI coding, making JavaScript code look like HTML. The use of JSX visually simplifies code which allows for detecting errors and protecting code from injections. JSX is also used for browser compilation via Babel, a compiler that translates the code into the format that a web browser can read. JSX syntax performs almost the same functions as TypeScript, but some developers find it too complicated to learn.

Babel
JSX'i Javascript'e çevirmek için Babel kullanılır. Açıklaması şöyle.

Babel is a transcompiler that converts JSX into JavaScript for the application to be understood by browsers.

HTML SVG Tag

Örnek
Şöyle yaparız.

<svg id="svg" height="100%" width="100%">
  <polyline id="polyline" style="fill:white;stroke:black;stroke-width:1"/>
  <line id="templine" style="fill:white;stroke:black;stroke-width:1" />
</svg>

addEventListener metodu
Şöyle yaparız.

<script>
  let lastPt;
  const polyline = document.querySelector('#polyline');
  const svg = document.querySelector('#svg');
  const templine = document.querySelector('#templine');
  svg.addEventListener('click',(e) =>{
    let pts = polyline.getAttribute('points') || '';
    const newPoint = `${e.clientX},${e.clientY} `;
    pts += newPoint;
    polyline.setAttribute('points',pts); 
    lastPt = [e.clientX,e.clientY]
  })

  svg.addEventListener('mousemove',(e) =>{
    templine.setAttribute('x1',lastPt[0]);
    templine.setAttribute('y1',lastPt[1]);
    templine.setAttribute('x2',e.clientX);
    templine.setAttribute('y2',e.clientY);
  })

</script>

JQuery Draggable

handle Alanı
Örnek
Şöyle yaparız.

$("#YourDIVId").draggable({
    handle: "img"
});

Function Sınıfı

Function.prototype.apply metodu
Şöyle yaparız.

// Create constructor method for array of args
Function.prototype.construct = function(aArgs) {
  var oNew = Object.create(this.prototype);
  this.apply(oNew, aArgs);
  return oNew;
};

function Person(name, gender) {
    this.name = name;
    this.gender = gender;
}

var args = ["Helen", "F"];

var person = Person.construct(args);

console.log(person);

Location Sınıfı

operator = metodu
Başka sayfaya yönlendirmek için şöyle yaparız

function Redirect() 
{  
  window.location="page2.html"; 
} 

reload metodu
Şöyle yaparız.

window.location.reload();