React JSX syntax

Time:2020-2-18

JSX syntax

  1. To use JSX syntax, you must runcnpm i babel-preset-react -DAnd then.babelrcAdd syntax configuration to;

Babelrc configuration

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

Configuration in webpack

module: {
    rules: [
      {test: / \. CSS $/, use: ['style loader ','css loader? Modules & localidentname = [name]] [local] - [hash: 5]']}, // enable CSS modularization by adding modules parameters to CSS loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000' },
      { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }
  1. The essence of JSX syntax: it is implemented in the form of react.createelement and does not directly render the HTML code written by the user to the page;
  2. If you want to write JS code inside JSX syntax, all JS code must be written inside {};
  3. When compiling engine, when compiling JSX code, if<Then compile it as HTML code. If{}The code inside curly braces is compiled as ordinary JS code;
  4. Within {}, you can write any code that conforms to the JS specification;
  5. In JSX, if you want to addclassProperty, then, must be written asclassNameBecauseclassIs a keyword in ES6; andclassSimilar to labelforProperty needs to be replaced withhtmlFor.
  6. When JSX creates DOM, all nodes must have unique root elements to wrap;
  7. If a comment is to be written, it must be placed inside {}
Var myh1 = react. CreateElement ('h1 ', null,' this is a big H1 ')
Var mydiv = react. CreateElement ('div ', {Title:' this is a div ', ID:' mydiv '},' this is a div ', myh1)

Because, react official found that if the user directly wrote JS code to create elements, the user would go mad. Then, the user began to look for a new front-end framework,
React official, put forward a set of JSX syntax specification, which enables us to write code similar to HTML in JS files, and quickly define the virtual DOM structure;
Question: what is the principle of JSX (XML compliant JS syntax)???
Note: be sure to remember that even if you can write JSX syntax in JS, when JSX is running internally, you should first use tag code like HTML,
Convert to the form of react.createelement;
That is to say: even if we write a tag like JSX, we do not directly render our HTML tag to the page, but first convert it to a JS code like react.createelement, and then render it to the page; (JSX is a programmer friendly syntax sugar)

If you want to use JSX syntax directly, you need to install the relevant syntax conversion tools first
Run cnpm I Babel preset react – D

Var mytitle = 'this is the tile value defined with the variable'

var arr = []
for (var i = 0; i < 10; i++) {
  Var P = but, do you know its essence???
  arr.push(p)
}
var mydiv = 
  This is a div element created using JSX syntax
  Hahaha, JSX is very useful
  But do you know its essence???
  

  {arr}

  /*This is a multiline comment. You can't see me*/
  { 
    // zheshi zhushi 
  }

  {/ * this is the comment * /}
  {/* 1234 */}
/*Comments must also be enclosed with {}*/



ReactDOM.render(myDiv,document.getElementById('app'))
// var name = 'zs'
// var age = 20
var person = {
  name: 'ls',
  age: 22,
  Gender: 'male',
  Address: 'Beijing'
}

//Note: the second parameter of the reactdom. Render() method, unlike Vue, does not accept strings such as "ා" app ", but needs to pass a native DOM object
ReactDOM.render(
  {/*  */}

  
, document.getElementById('app'))

//Note: here... Obj syntax is the attribute diffusion in ES6, which means that all attributes on this object are expanded and put in this position