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( 
Hello, world!
, 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-myattributeadded. To add a custom attribute, you need to use thedata-prefix.

Instance 

    php中文网 React 实例

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.jsfile with the following code:

ReactDOM.render( 
Hello, world!
, document.getElementById('example') );

Then Introduce the JS file into the HTML file:

Instance 

    Hello React!

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 

    php中文网 React 实例

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

You cannot use the

if elsestatement in JSX. You can use theconditional (ternary operation)expression instead. In the following example, if the variableiis equal to1, the browser will outputtrue. If the value of i is modified,false.# will be output.

##Instance 

    php中文网 React 实例

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 addpxafter specifying the element number. The following example demonstrates adding themyStyleinline style to theh1element:

Example 

    php中文网 React 实例


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

    php中文网 React 实例

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

    php中文网 React 实例

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

classandforare not recommended as XML Property name. Instead, React DOM usesclassNameandhtmlForfor corresponding attributes.

←
→