React JSX

React uses JSX instead of 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.

##Using JSX

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

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

We can nest it in the above code Multiple HTML tags need to be wrapped with a div element. The p element in the example has a custom attribute

data-myattribute added. To add a custom attribute, you need to use the data- prefix.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	<h1>php中文网</h1>
      	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Run instance»Click the "Run instance" button to view the online instance

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('example')
);

Then Introduce the JS file into the HTML file:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
  <script type="text/babel" src="helloworld_react.js"></script>
  </body>
</html>

Run Instance»Click the "Run Instance" button View online examples

JavaScript Expressions

We can use JavaScript expressions in JSX. Expressions are written in curly braces

{}. The examples are as follows:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	  <h1>{1+1}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

You cannot use the

if else statement in JSX. You can use the conditional (ternary operation) expression 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, false.# will be output.

##Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
	  var i = 1;
      ReactDOM.render(
      	<div>
      	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Run Instance»
Click the "Run Instance" button to view the online instance

Style

React recommends using inline styles. We can use the

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:

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      	<h1 style = {myStyle}>php中文网</h1>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Comments

Comments need to be written in curly brackets , the example is as follows:

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
            <h1>php中文网</h1>
            {/*注释...*/}
         </div>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Array

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

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var arr = [
        <h1>php中文网</h1>,
        <h2> php中文网</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Run Example»

Click the "Run Example" button to view the online example

##HTML tag vs. React component

React can render HTML tags (strings) or React components (classes).

To render HTML tags, just use lowercase tag names in JSX.

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

To render a React component, just create a local variable starting with a capital letter.

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

React's JSX uses uppercase and lowercase conventions to distinguish local component classes and HTML tags.

Note:
Since JSX is JavaScript, some identifiers like
class and forare not recommended as XML Property name. Instead, React DOM usesclassName and htmlFor for corresponding attributes.

← React installation

React components →