what is react jsx-JS Tutorial-php.cn

what is react jsx

藏色散人

Release： 2020-11-30 15:54:35

Original

2182 people have browsed it

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>Hello, world!</h1>;

Copy after login

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;));

Copy after login

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>Hello, world!</h1>,
    document.getElementById(&#39;example&#39;)
);

Copy after login

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

Copy after login

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>Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
);

Copy after login

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>

Copy after login

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>{1+1}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Copy after login

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>{i == 1 ? &#39;True!&#39; : &#39;False&#39;}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Copy after login

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 style = {myStyle}>PHP中文网</h1>,
    document.getElementById(&#39;example&#39;)
);

Copy after login

Comments

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

React Example

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

Copy after login

Array

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

React Example

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

Copy after login

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