what is react jsx-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

what is react jsx

藏色散人

Nov 10, 2020 am 11:47 AM

react

react jsx is a JavaScript syntax extension that looks a lot like XML. React uses JSX to replace regular JavaScript. The advantages of JSX are: 1. JSX executes faster; 2. It is type-safe. Errors can be found during the compilation process; 3. Using JSX to write templates is faster.

what is react jsx

The operating environment of this tutorial: windows10 system, react16, this article is applicable to all brands of computers.

Recommended: "Programming Video"

React JSX

React uses JSX to replace regular JavaScript.

JSX is a JavaScript syntax extension that looks a lot like XML.

We don’t necessarily need to use JSX, but it has the following advantages:

JSX executes faster because it is optimized after being compiled into JavaScript code.
It is type-safe and errors can be found during the compilation process.
Writing templates using JSX is simpler and faster.

Let’s take a look at the following code first:

const element = <h1 id="Hello-nbsp-world">Hello, world!</h1>;

This may seem strange tag syntax is neither a string nor HTML.

It's called JSX, a syntax extension for JavaScript. We recommend using JSX to describe user interfaces in React.

JSX is implemented inside JavaScript.

We know that elements are the smallest units that constitute React applications, and JSX is used to declare elements in React.

Different from browser DOM elements, elements in React are actually ordinary objects. React DOM can ensure that the data content of the browser DOM is consistent with the React elements.

To render React elements into the root DOM node, we render them onto the page by passing them both to the ReactDOM.render() method:

React Example

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById(&#39;example&#39;));

Note:

Since JSX is JavaScript, some identifiers like class and for are not recommended as XML attribute names. Instead, React DOM uses className and htmlFor for corresponding attributes.

Using JSX

JSX looks similar to HTML, we can look at the example:

ReactDOM.render(
    <h1 id="Hello-nbsp-world">Hello, world!</h1>,
    document.getElementById(&#39;example&#39;)
);

We can nest multiple HTML tags in the above code, we need to use a div The element wraps it. The p element in the example adds a custom attribute data-myattribute. To add a custom attribute, you need to use the data- prefix.

React example

ReactDOM.render(
    <div>
    <h1 id="PHP中文网">PHP中文网</h1>
    <h2 id="欢迎学习-nbsp-React">欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Independent file

Your React JSX code can be placed in an independent file. For example, we create a helloworld_react.js file with the following code:

ReactDOM.render(
  <h1 id="Hello-nbsp-world">Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
);

Then introduce the JS file in the HTML file:

React Example

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

JavaScript Expression

We can use JavaScript expressions in JSX. Expressions are written within curly braces {}. Examples are as follows:

React Example

ReactDOM.render(
    <div>
      <h1 id="">{1+1}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

If else statements cannot be used in JSX, but conditional (ternary operation) expressions can be used instead. In the following example, if the variable i is equal to 1, the browser will output true. If the value of i is modified, it will output false.

React Example

ReactDOM.render(
    <div>
      <h1 id="i-nbsp-nbsp-nbsp-nbsp-True-nbsp-nbsp-False">{i == 1 ? &#39;True!&#39; : &#39;False&#39;}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Style

React is recommended Inline styles. We can use camelCase syntax to set inline styles. React will automatically add px after specifying the element number. The following example demonstrates adding the myStyle inline style to the h1 element:

React Example

var myStyle = {
    fontSize: 100,
    color: &#39;#FF0000&#39;
};
ReactDOM.render(
    <h1 id="PHP中文网">PHP中文网</h1>,
    document.getElementById(&#39;example&#39;)
);

Comments

Comments need to be written in curly brackets. The example is as follows:

React Example

ReactDOM.render(
    <div>
    <h1 id="PHP中文网">PHP中文网</h1>
    {/*注释...*/}
     </div>,
    document.getElementById(&#39;example&#39;)
);

Array

JSX allows inserting arrays in templates, and the array will automatically expand all members:

React Example

var arr = [
  <h1 id="PHP中文网">PHP中文网</h1>,
  <h2 id="学的不仅是技术-更是梦想">学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById(&#39;example&#39;)
);

The above is the detailed content of what is react jsx. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn