React uses JSX instead of regular JavaScript.
JSX is a JavaScript syntax extension that looks like XML.
We do not need to use JSX, but it has the following advantages:
- JSX performs faster because it is optimized after compiling for JavaScript code.
- It is type safe, in the compilation process can find errors.
- Using JSX to write templates is simpler and faster.
Use JSX
JSX looks like HTML, we can look at the example:
ReactDOM . Render (
< h1 > Hello , world ! </ H1 >,
document . GetElementById ( ' example ' ) ) ;
We can nest in the above code, a plurality of HTML tags, requires a div element surrounding it, P element instance was added a custom attribute Data-myAttribute , add custom properties required data- prefix.
React instance
ReactDOM . Render (
< div > < h1 > rookie tutorial </ h1 > < h2 > welcome to learn React </ h2 > < p data - myattribute = " somevalue " > this is a very nice javascript library! </ P > / Div >,
document . GetElementById ( ' example ' ) ) ;
try it"
Independent documents
Your React JSX code can be placed on a separate file, for example, we create a
helloworld_react.jsfile, the code is as follows:
ReactDOM . Render (
< h1 > Hello , world ! </ H1 >,
document . GetElementById ( ' example ' ) ) ;
And then in the HTML file to introduce the JS file:
React instance
< 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 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 ' ) ) ;
try it"
You can not use the if else statement in JSX , but you can use the conditional (ternary) expression instead. In the following example, if the variable i equals 1, the browser will output true , and if the value of i is modified, false is output .
React instance
ReactDOM . Render (
< div > < h1 > { i == 1 ? ' True! ' : ' False ' } </ h1 > </ div >,
document . GetElementById ( ' example ' ) ) ;
try it"
style
React recommends using inline style. We can use the camelCase syntax to set the inline style. React will automatically add px after specifying the number of elements . The following example demonstrates adding the myStyle inline style to the h1 element :
React instance
Var meStyle = { fontSize : 100 ,
color : ' # FF0000 ' } ;
ReactDOM . Render (
< h1 style = { myStyle } > rookie tutorial </ h1 >,
document . GetElementById ( ' example ' ) ) ;
try it"
Annotations
Comments need to be written in curly braces, examples are as follows:
React instance
ReactDOM . Render (
< div > < h1 > novice tutorial </ h1 >
{ / * comment ... * / }
</ div >,
document . GetElementById ( ' example ' ) ) ;
try it"
Array
JSX allows you to insert an array in a template, and the array will automatically expand all members:
React instance
Var arr = [
< h1 > rookie tutorial </ h1 >, < h2 > learn not only technology , it is a dream! </ H2 >,
] ;
ReactDOM . Render (
< div > { arr } </ div >,
document . GetElementById ( ' example ' ) ) ;
try it"
HTML tags vs. React components
React can render HTML tags or React components.
To render an HTML tag, simply use the lowercase letter name in JSX.
Var myDivElement = < div className = " foo " />;
ReactDOM . Render ( myDivElement , document . GetElementById ( ' example ' ) ) ;
To render the React component, simply create a local variable that begins with an uppercase letter.
Var myComponent = React . CreateClass ( { / * ... * / } ) ;
var myElement = < MyComponent someProperty = { true } />;
ReactDOM . Render ( myElement , document . GetElementById ( ' example ' ) ) ;
React's JSX uses large and lower case conventions to distinguish between local class and HTML tags.
