What is JSX? Introduction to how to use jsx (with code)

In react, our page content is written through JSX, so what exactly is JSX? JSX is actually a JavaScript object that creates a js object to describe the information of the HTML structure. Remember here that JSX is an extension language of js, similar to HTML but not HTML, because JSX can also perform calculations, judgments, add some js languages, etc.

Usage of jsx Operations in JSX

   render() {
      return(
        <div>
           <h2>算数题</h2>
           <ul>
             <li>5+6={5+6}</li>
             <li>6+6={6+6}</li>
             <li>10*10={10*10}</li>
           </ul>
        </div>
      )
    }

In JSX, {} is used to distinguish between HTML and js, that is Say, all js languages ​​must be enclosed in {}

Use of jsx variables in JSX

 render() {
      const flag = true;
      return(
        <div>
            {flag ? (<div>flag为真</div>) : (<div>flag为假</div>)}
        </div>
      )
    }

Use of jsx Styles in JSX

In JSX, adding styles to elements also uses the style attribute, but style contains a style object, as shown below:

 render() {
      var newStyle = {
        background: 'blue',
        fontSize:'15px'
      }
      return(
        <div>
            <div style={{color: &#39;red&#39;}}>颜色</div>
            <div style={newStyle}>样式</div>
        </div>
      )
    }

Through the above case, we can know that in JSX, the style attribute name must be named in camel case

HTML tags in JSX used in jsx

In JSX , some tag names need to be converted in order to prevent conflicts:

1. class must use className to replace the for attribute in the

2. lable element. Use htmlFor instead, as follows:

<label htmlFor="msg" ></label>

Also note here that all tags in JSX must be closing tags

Related recommendations:

How Vue supports JSX syntax detailed explanation

JSX syntax learning introductory tutorial in JavaScript's React framework_Basic knowledge

Detailed introduction to React

The above is the detailed content of What is JSX? Introduction to how to use jsx (with code). For more information, please follow other related articles on the PHP Chinese website!