
Fejlesztőként különféle eszközöket és nyílt forráskódú csomagokat használunk a munkánk megkönnyítése érdekében. Némelyiküket olyan széles körben használják az egész közösségben, hogy úgy tűnik, hogy bennszülöttek a JavaScript-ben. De nem azok, és naponta alapvetően megváltoztathatják a kódírás módját .
Ezen technológiák egyike, amelyet valószínűleg már használ, a JSX - XML-szerű szintaxis kiterjesztés a JavaScript számára . A Facebook által létrehozott csapat célja, hogy egyszerűsítse a fejlesztői élményt. Mint a specifikáció mondja, a JSX létrehozásának indoka a következő volt:
"... tömör és megszokott szintaxis meghatározása a fa struktúrák attribútumokkal történő meghatározásához." ~ JSX SpecMost valószínűleg azt mondod magadnak: "Hé, Ryan, ez nagyon jól hangzik, de máris érj a kódhoz ", szóval itt van az első példánk.
const helloWorld = Hello, World!
;
És ez az!
A fenti kódrészlet ismerősnek tűnik, de abbahagyta-e már, hogy gondolkodjon annak erején? A JSX teszi lehetővé, hogy a HTML vagy React elemekből álló fa struktúrákat úgy tudjuk áthaladni , mintha standard JavaScript értékek lennének.
Bár a React írásakor nem kell használni a JSX-t (vagy a React-et használni a JSX kipróbálásához), nem tagadhatjuk, hogy ez a React ökoszisztéma fontos része, ezért merüljünk el, és nézzük meg, mi történik a motorháztető alatt.
A JSX használatának megkezdése
A JSX-szintaxis használatakor az első dolog, hogy a React-nek a hatókörben kell lennie. Ez annak köszönhető, hogy hogyan áll össze. Vegyük például ezt a komponenst:
function Hello() { return Hello, World!
}
A kulisszák mögött a Hello
komponens által nyújtott minden egyes elem átkerül egy React.createElement
hívásba.
Ebben az esetben:
function Hello() { return React.createElement("h1", {}, "Hello, World!")}

Ugyanez vonatkozik a beágyazott elemekre is. Az alábbi két példa végül ugyanazt a jelölést eredményezi.
// Example 1: Using JSX syntaxfunction Nav() { return ( - Home
- About
- Portfolio
- Contact
);}
// Example 2: Not using JSX syntaxfunction Nav() { return ( React.createElement( "ul", {}, React.createElement("li", null, "Home"), React.createElement("li", null, "About"), React.createElement("li", null, "Portfolio"), React.createElement("li", null, "Contact") ) );}
React.createElement
Amikor a React elemeket hoz létre, ezt a módszert hívja meg, amely három argumentumot igényel.
- Az elem neve
- Az elem kellékeit képviselő objektum
- Az elem gyermekeinek tömbje
Itt meg kell jegyeznünk, hogy a React a kisbetűs elemeket HTML és Pascal case (pl. ThisIsPascalCase) elemként értelmezi egyéni összetevőként. Emiatt a következő példákat másképp értelmeznék.
// 1. HTML elementReact.createElement("div", null, "Some content text here")
// 2. React elementReact.createElement(Div, null, "Some content text here")
Az első példa a tring "Some content text
here" as its child. However, the second version would throw an error (unless, of course, a custom component &
lt;Div /> was in scope) bec
ause is undefined.
Props in JSX
When working in React, your components often render children and need to pass them data in order for the children to render properly. These are called props.
I like to think of React components as a group of friends. And what do friends do? They give each other props. Thankfully, JSX offers us a number of ways to do that.
// 1. Props defaulted to true
// 2. String literals
// 3. JavaScript expressions
// 4. Spread attributes
But beware! You cannot pass if statements or for loops as props because they are statements, not expressions.

Original text

Children in JSX
As you are building your app, you eventually start having components render children. And then those components sometimes have to render children. And so on and so forth.
Since JSX is meant to make it easy for us to reason about tree-like structures of elements, it makes all of this very easy. Basically, whatever elements a component returns become its children.
There are four ways to render child elements using JSX:
Strings
This is the simplest example of JSX children. In the case below, React creates a <
h1> HTML element with one child. The child, however, is not another HTML element, just a simple string.
function AlertBanner() { return ( Your bill is due in 2 days
)}
JSX Elements
This is probably the use case that new React developers would be most familiar with. In the component below, we’re returning an HTML child (the er>), which has two children of its own &
lt;Nav /> and &l
t;ProfilePic /> both of which are custom defined JSX elements.
function Header(props) { return ( )}
Expressions
Expressions allow us to easily render elements in our UI that are the result of a JavaScript computation. A simple example of this would be basic addition.
Say we have a component called /> that renders information about a bill or receipt. Let’s assume it takes one prop called
total that represents the pre-tax cost and another prop t
axRate, which represents the applicable tax rate.
Using expressions, we can easily render out some useful information for our users!
function BillFooter(props) { return ( Tax: {props.total * props.taxRate}
Total: {props.total + props.total * props.taxRate}
);}
Functions
With functions, we can programmatically create elements and structures, which React will then render for us. This makes it easy to create multiple instances of a component or render repeated UI elements.
As an example, let’s use JavaScript’s .map()
function to create a navigation bar.
// Array of page informationconst pages = [ { id: 1, text: "Home", link: "/" }, { id: 2, text: "Portfolio", link: "/portfolio" }, { id: 3, text: "Contact", link: "/contact" }];// Renders a
with programmatically created
childrenfunction Nav() { return ( {pages.map(page => { return ( - {page.text}
); })}
);}
Now, if we want to add a new page to our site, all we need to do is add a new object to the pages
array and React will take care of the rest!
Take note of the key
prop. Our function returns an array of sibling elements, in this case <
li>s, and React needs a way to keep track of which mounts, unmounts or updates. To do that, it relies on this unique identifier for each element.
Use the tools!

Sure, you can write React applications without JSX, but I’m not really sure why you’d want to.
The ability JSX gives us to pass around elements in JavaScript like they were first-class citizen lends itself well to working with the rest of the React ecosystem. So well, in fact, you may have been writing it every day and not even known it.
Bottom line: just use JSX. You’ll be happy you did.