"02" React of the JSX

React and Reactdom is the core object in react, react is the core function, Reactdom provides the operation of DOM, the previous old version only react no reactdom, The new release of Reactdom provides two rendering methods: Browser rendering (react-dom.js) and server rendering (React-dom-server.js).

So the program uses react, first introduced:

var React = require (' React '); var reactdom = require (' react-dom ');

ES6 (ES2015)

Import React from ' React ', import reactdom from ' React-dom ';

The most basic method of React is to insert an element (HTML fragment) into the specified DOM node.

Reactdom.render (Element,targetdom);

1.1. What is JSX?

What is the HTML tag part of JSX,JS is a jsx.

JSX is a syntax scheme proposed by the Facebook team to write JavaScript objects using HTML tags directly in JavaScript code. It uses the Xml-like syntax, which needs to be compiled into real-world JavaScript code through Jsxtransformer (deprecated, currently using Babel).

React is a component-based development idea, React that a component can be a completely independent module file without any other dependencies. A component can have its own style (Inline style) and structure (HTML written by JSX).

1.2. JSX origin

Before React and JSX, a component would face several problems if it were to contain HTML structures: JSX solved these problems well

1. The HTML of the component is written directly in the page, then the structure of the component (HTML template) and the behavior (JS function) are separated;

2. The HTML of the component is inserted into the JavaScript code directly with the string, then a large string concatenation will occur, and the developer will need to be careful to ensure that the string concatenation does not result in the entire code being unable to run because of the lack of a symbol;

3. Using the idea of MVC layering, introduce the template engine, then how to introduce the fragment of the template file;

1.3. JSX is optional

JSX looks tall, but JSX itself cannot run directly in the JavaScript engine, because JavaScript doesn't have JSX technology at all. So if you want to run JSX, compile it into code that JavaScript can execute.

JSX Syntax writing:

var React = reqiure (' React '); var reactdom = Reqiure (' React-dom); var el = <a href= "www.baidu.com" > Point me </a> Reactdom.render (El,document.getelementbyid (' app '));

JavaScript Authoring:

var React = require (' React '); var reactdom = require (' react-dom ');
React.createelement to construct the DOM tree of the component. The first parameter is the label name, the second argument is the Property object, and the third argument is a child element. var el = react.createelement (' A ', {href: ' www.baidu.com '}, ' point me ', ' a '); Reactdom.render (El,document.getelementbyid (' app '));

The above two formulations are completely equivalent because Webpack uses Babel to compile the jsx into JavaScript code.

Use Babel Index.js to view the final running code.

1.4. JSX and HTML differences

The difference between JSX and HTML

1. Render the HTML tag, declaring the variable with the first letter lowercase

Div/input/button

2. Render the react component, declaring the variable capitalized with the first letter

MyButton mydatalist

React's JSX uses uppercase and lowercase letters to differentiate between local component classes and HTML tags.

3, class and for these two properties, the JSX syntax is ultimately converted to pure JavaScript, so as in the JavaScript dom, with ClassName and htmlfor.

1.5. JSX expressions

The JSX syntax writes a JavaScript expression with only {}, and you can use the {} expression to dynamically insert values.

The SX syntax, like the syntax for writing XML directly in JavaScript code, is essentially a syntactic sugar, and each XML tag is converted into pure JavaScript code by the JSX conversion tool, and React is officially recommended to use JSX

Normal value

var url = "Www.baidu.com"; var el = <a href= "{URL}" > Point me </a>

Trinocular operation (cannot use if)

<div classname= "2>1?" Class2 ': ' Class1 ' ></div>

When you create elements within an HTML standard, the JSX converter discards those nonstandard attributes, and if you must add custom attributes, you need to add the data-prefix before these custom attributes.

<div data-custom-attribute= ' foo ' > Custom attributes Using Data start </div>

Property extension

var props = {"name": "username", "type": "text"};var input = <input {... props}  value= "value"/>//equivalent to <input Name= ' username ' type= ' text ' value= '

Value values

' >

Style properties: JSX The style as an object, so the style cannot be written directly to style= ' Color:red,background-color:yellow '

var styles = {color: ' Red ', BackgroundColor: ' yellow '};var div = <div style={styles}> a div</div>
var div = <div style={{color: ' Red ', BackgroundColor: ' Yellow '}}> A div</div>//note is two {{}} , the outer bracket is an expression and the inner curly brace is a JSON object.

1.6. JSX Attention Point

1, the use of Jsx JS file, generally named Jsx or JS.

2, JSX elements must be wrapped up with a tag

var view = <div> First </div><div> second </div>; Wrong, must be a parcel. var view=<div><div> first </div><div> second </div></div>//correct.

3, JSX way to create objects, not an HTML DOM, but a virtual dom.

React.createelement () and document.createelement (); The objects that are created are two very different kinds of objects.

4, react the ordinary label event name, the use of on+ event name, click and for the onclick, change for onchange.

"02" React of the JSX