(React: Up and Running) Reading Notes-JSX

(React: Up and Running) Reading Notes-JSX
Transpiling JSX
Transpilation is the process of getting the source code and then using JavaScript that can be understood by the browser of the old version to rewrite it. The syntax between the two versions is different, but the function is the same.
This JavaScript polyfills is different. polyfill is completely JavaScript-land. For example, to solve the API compatibility problem of the new and old versions of JavaScript, the higher version of the API can be used through polyfill so that the lower version can also be used. However, when a new syntax is introduced, such as the class keyword in the new JavaScript version, it cannot be compatible through polyfill. Therefore, to use these new syntaxes on the browser, you must perform compilation (transpilation) on the source code first. In this way, you can directly use many new ES6 features.

Client-side
Transpilation in a browser is the simplest implementation method, but it will adversely affect the performance of users. Therefore, this method is not recommended for real users, it is recommended to compile on the server. However, this method is very advantageous for our daily development and does not require a lot of compilation steps.
To use JSX on Client-side, you need to do two things: 1) include client JSX transpilation script 2) use JSX to mark the scripts script
In earlier versions of React, the JSX build script is JSXTransformer, and the new version uses babel (v0.14 ). The method and syntax used by the two are basically the same. babel not only supports JSX, but also supports various features of the latest JavaScript version to the lower version of JavaScript.
If the JSX build script is not available, an error is reported if the JSX syntax is included in the browser. After the build script is added, the build script searches for the script whose tag type is "text/jsx" in the transiles code and changes the syntax from JSX to normal JavaScript syntax, then, auto-insert the converted JavaScript code into the document. For example, we can see that the generated script also contains a very helpful source map (a mapping of before/after the transformation) for debug ).

In the above example, we use inline scripts directly, and we can also use external scripts. The principle and usage are the same as the above process, for example:
However, the difference between external scripts and inline scripts is that this method must ensure that the Code is deployed on an HTTP server, because the build script needs to use XMLHttpRequest to download these external scripts, before performing transform, XMLHttpRequest is restricted by the browser's same-origin rules.

JSX transformation
JSX transform is very lightweight and simple. It even retains the line number of the error. You can use this to trace back the error source in JSX. There is a JSX syntax converter officially provided by babel: https://babeljs.io/repl/, supporting on-line conversion from jsxsyntax to reactjavascript code.
There is also a very useful online Conversion Tool: https://facebook.github.io/react/html-jsx.html. on-line support for converting the HTML label language into the jsxsyntax.

JavaScript in JSX
When building the UI, we often need variables/conditions/loops. We do not need to learn another template language to solve this problem, JSX allows us to use JavaScript in JSX. You only need to include the JavaScript code in a curly braces. This is similar to the processing of some template engines. If you have learned the template concept before, it will be very easy to understand, JSX is very simple compared to those very wordy template engines.
When we use the connected {} blocks in JSX, JSX puts them in tags to distinguish them during processing. For example, when {1} {2} is finally rendered in the DOM, it will become 12.


Whitespace in JSX
The blank space in JSX is similar to HTML, but not exactly the same.
Example 1:
The style after JSX processing is:
Multiple spaces are eventually merged into one, so the final rendering result is "1 plus 2 is 3"

Example 2:
The style after JSX processing is:
The final rendering result is "1plus2is3"
The use of whitespace in a tag is similar to that in HTML. One solution is to add spaces in JSX by inserting JavaScript expressions. For example, either of the following methods can be used:



Comments in JSX refer to Reading Notes in official documents

For more information about HTML entities, see reading notes in the official documentation.

Refer to Reading Notes from official documents for Anti-XSS

Spread attributes
Refer to the reading notes in the official documents. Most of the concepts are the same. It mentions a very interesting usage: Parent-to-child spread attributes, that is, the parent component's props is used to pass attributes to child component. For example:
You can directly use these props to pass to tag a for attributes:


Returning multiple nodes in JSX
In the render () function of component, we can only return the component of one single node. for multiple nodes, we can write it into one component and then return it. For example, here we return the problem of multiple spans:

Although we cannot return a nodes array in the render () function, we can use arrays in the composition process. As long as the nodes in this array have a normal key attribute and the key attribute does not need to be set, We can insert whitespace or strings in this nodes array. For example:

Another similar method is to receive any number of children component from the parent component and render them in the render () function. For example:


JSX vs HTML
This part of Facebook official documents is also mentioned, but it is not comprehensive and careful, This book is fully explained.
No Class, what? Class and for cannot be used as attribute names. They are reserved keywords of ECMAScript and must be replaced by className and htmlFor.
Style is an object The value accepted by the style attribute is the object value.Is not a string separated. In addition, all CSS properties are named by the hump method, and dash-delimited cannot be used.

Closing tags Some tags in HTML do not need to be closed, but they must be closed in JSX.For example
And so on
CamelCase attributes In JSX, all attribute names must be named by the camper method.. For example: