React JSX
React use JSX instead of regular JavaScript.
JSX is a JavaScript syntax extension that looks a lot like XML.
We don’t need to use JSX necessarily, 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 compilation.
Writing templates in JSX is easier and faster.
Let’s take a look at the following code:
const element = <h1>Hello, world!</h1>;
The tag syntax, which may seem strange, is neither a string nor a HTML.
It is called JSX, a syntactic extension of JavaScript. We recommend it in the React use JSX to describe the user interface in.
JSX is implemented within JavaScript.
We know that elements are made up React the smallest unit of application, JSX is used to declare React the elements in it.
With the browser’s DOM elements are different. React the elements are actually ordinary objects, and React DOM ensures that the browser DOM the data content of the React elements are consistent.
To set the React element is rendered to root DOM node, we pass them all to the ReactDOM.render() to render it to the page
React instance
varmyDivElement=
<divclassName="foo"/>;ReactDOM.render(myDivElement,document.getElementById('example'));
Note:
Because JSX is JavaScript, some identifiers are like class and for . It is not recommended as a XML property name. Instead, React DOM use className and htmlFor to make the corresponding properties.
Use JSX
JSX looks like HTML, so we can take a look at an example:
ReactDOM.render(<h1>Hello,world!</h1>,document.getElementById('example'));
We can nest multiple HTML tags in the above code, using a div element wraps it, the p element added a custom attribute data-myattribute to add custom properties, you need to use data- prefix.
React instance
ReactDOM.render(<div> <h1>Rookie Tutorial</h1> <h2>Welcome to learn React</h2>
<pdata-myattribute="somevalue">This is a great JavaScript library!</p> </div>
,document.getElementById('example'));
Independent file
Your React JSX code can be placed on a separate file, for example, we create a helloworld_react.js file, the code is as follows:
ReactDOM.render(<h1>Hello,world!</h1>,document.getElementById('example'));
Then introduce the JS file into the HTML file:
React instance
<body><divid="example"></div><scripttype="text/babel"src="helloworld_react.js"></script></body>
JavaScript expression
We can use JavaScript expressions in JSX. The expression is written in curly braces {} . Examples are as follows:
React instance
ReactDOM.render(<div> <h1>{1+1}</h1> </div>
,document.getElementById('example'));
Cannot be used in JSX if else statement, but you can use the conditional (ternary operation) expression to replace. In the following example, if the variable i equal to 1 the browser will output true if you change the value of I, the output false .
React instance
ReactDOM.render(<div> <h1>{i==1?'True!':'False'}</h1> </div>
,document.getElementById('example'));
Style
React inline style is recommended. We can use it. camelCase syntax to set the inline style. React will be automatically added after the element number is specified px . The following example shows how to create a h1 element addition myStyle inline style:
React instance
varmyStyle={fontSize:100,color:'#FF0000'};
ReactDOM.render(<h1style={myStyle}>Rookie Tutorial</h1>,document.getElementById('example'));
Annotation
Comments need to be written in curly braces. Examples are as follows:
React instance
ReactDOM.render(<div>
<h1>Rookie Tutorial</h1>{/\*explanatory note...\*/}</div>,document.getElementById('example'));
Array
JSX allows you to insert an array into the template, and the array automatically expands all its members:
React instance
vararr=[<h1>Rookie Tutorial</h1>,
<h2>Learning is not only about technology, but also about dreams！</h2>,];
ReactDOM.render(<div>{arr}</div>,document.getElementById('example'));