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