React JSX


Release date:2024-03-09 Update date:2024-03-15 Editor:admin View counts:136

Label:

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

Powered by TorCMS (https://github.com/bukun/TorCMS).