Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User
React ; JSX ;

React: JSX

12.02.2021 (👁4643)


 

Wofür braucht man JSX bei React?

 

Syntax

JSX ist eine Erweiterung von Javascript und ermöglicht das Schreiben von HTML und Javascript in einem.

JSX erstellt elements.

 

Ein Beispiel ist immer

const element = <h1>Hello, world!</h1>;

 

Syntax Erweiterung für Javascript

Template language

 

 

Einbetten von Funktionen und Werten

In folgenden Beispiel wird name erstellt und in einem element eingebettet durch die {name} Klammern

const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>;

ReactDOM.render(

  element,

  document.getElementById('root')

);

 

 

Dynamische Inline-Funktionen

Man kann auch Funktionen, Berechnungen, Methoden in den { Klammern } übergeben.

Dadurch kann auch in einer if oder for loop der Wert zur Laufzeit übergeben werden.

 

 

Child Elemente

Einbinden von Javascript Ausdrücken

Hier in der image Source src

const element = <img src={user.avatarUrl}></img>;

 

 

Mehrstufige JSX Tags

Hier mit ( runder Klammer ) eingefasst.

const element = (

  <div>

    <h1>Hello!</h1>

    <h2>Good to see you here.</h2>

  </div>

);

 

 

Verhinderung von Injection ' und Cross-Site-Scripting

Alle Elemente von JSX werden vor dem Rendern in Strings umgewandelt und dadurch Injection mit einfachem Hochkomma ' und Cross-Site Scripte verhindert.

const title = response.potentiallyMaliciousInput;

// This is safe:

const element = <h1>{title}</h1>;

 

 

Der Babel Compiler wandelt JSX elemente in React.createElement() um

Wodurch dann Elemente erstellt werden

const element = {

  type: 'h1',

  props: {

    className: 'greeting',

    children: 'Hello, world!'

  }

};

 

 

Quelle: https://reactjs.org/docs/introducing-jsx.html