Latest web development tutorials

React JSX

React to replace the conventional use JSX JavaScript.

JSX looks like XML is an extension of JavaScript syntax.

We do not necessarily use the JSX, but it has the following advantages:

  • JSX execute faster because it is compiled into JavaScript code after the optimization.
  • It is type-safe, it can be found during compilation errors.
  • Use JSX authoring template easier and faster.

Use JSX

JSX looks similar to HTML, we can look at examples: 

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

We can be nested in the code above multiple HTML tags, you need to use a div element surrounding it, instances p element adds custom attributedata-myattribute, add custom attributes need to use data-prefix. 

ReactDOM.render(
	<div>
	<h1>本教程</h1>
	<h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
	,
	document.getElementById('example')
);

try it"

Independent file

Your React JSX code can be placed on a separate document, for example, we create a helloworld_react.js file, as follows: 

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

Then introduced into the JS file in the HTML file: 

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

try it"

JavaScript expression

We can use JavaScript expressions in the JSX. Write an expression in curly braces{}.Examples are as follows: 

ReactDOM.render(
	<div>
	  <h1>{1+1}</h1>
	</div>
	,
	document.getElementById('example')
);

try it"

You can not useif else statements in JSX, a single can use the conditional (ternary operator)expression instead. The following example, if the variablei isequal to1browser will outputtrue,if you modify the value of i, it will outputfalse.

ReactDOM.render(
	<div>
	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
	</div>
	,
	document.getElementById('example')
);

try it"

style

React recommend using inline styles. We can usecamelCase syntax to set inline styles. React adds pxautomatically after a specified element number. The following example demonstrates addingmyStyle inline style for h1elements: 

var myStyle = {
	fontSize: 100,
	color: '#FF0000'
};
ReactDOM.render(
	<h1 style = {myStyle}>本教程</h1>,
	document.getElementById('example')
);

try it"

Note

Note need to write in braces, examples are as follows: 

ReactDOM.render(
	<div>
    <h1>本教程</h1>
    {/*注释...*/}
 	</div>,
	document.getElementById('example')
);

try it"

Array

JSX allows the insertion in the template array, the array will automatically expand to all members: 

var arr = [
  <h1>本教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

try it"

HTML tags vs. React assembly

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

To render HTML tags, just use the tag name in lowercase letters in the JSX. 

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

To render React component, simply create a local variable beginning with a capital letter. 

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

React the JSX use upper and lower case conventions to distinguish classes of local components and HTML tags.

note:

Because JSX is JavaScript, a number of identifiers such as class and for not recommended as an XML attribute name. As an alternative, React DOM use className and htmlFor do the corresponding property.