Basic use of React!

React introduction!
React is a JAVASCRIPT library for building user interfaces.
React is mainly used to build UI. Many people think that react is the V (view) in MVC.
React originated from Facebook's internal project to build Instagram's website, and was open source in May 2013.
React has high performance and simple code logic. More and more people have begun to pay attention to and use it.

Single page use React!

1. Prepare a "container"
2. Introduce react core library
3. Introduce react dom, which is a dom used to support react operations
4. babel is introduced to convert jsx syntax to js

The following is the react page defined on a single page: first, you need to download react. The download package provides methods and learning examples, which can be found on the official website( https://reactjs.org/ )Download the latest version. Or we can introduce a CDN about react in a single page.

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Not recommended in production environments -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Next, we call the createElement() method of React and render it on a single page.

<script type='text/babel'>  //We must write babel here, because we use jsx syntax and combine js code with html tags
	//A method
	var ll = React.createElement('div', { className: "title" }, "title")
	console.log(ll);
	ReactDOM.render(ll, document.getElementById("app"))

	//The second direct declaration object uses reactdom Render() method rendering  
	var name = 'Li Si'
	var age = 19
	var d1 = 'r1'
	var re = (<div className={d1}>
	    <h3> I am {name},this year {age} Years old </h3>
	 </div>)
	 ReactDOM.render(re, document.getElementById("app"))
<script/>

Here is a summary of the syntax rules of jsx:

jsx rule of grammar:
        1.Define virtual DOM Do not write quotation marks when.
        2.Mixed in label JS Expression{}. 
        3.Do not specify the class name of the style class，To use className. 
        4.Inline style, to use style={{ key:value }}Write in the form of.
        5.Only one root tag is generally used div Wrap it up.
        6.The label must be closed
        7.Label initials
            (1).If it starts with a lowercase letter, the label is converted to html Elements with the same name in, if html If there is no element with the same name corresponding to the tag in the, an error is reported.
            (2).If it starts with a capital letter, react Render the corresponding component. If the component is not defined, an error will be reported.

Summarize the interview questions about jsx through jsx!

1. What is jsx?
JSX is short for J avaScript XML. It is a file used by React. It uses the expressiveness of JavaScript and HTML like template syntax. This makes HTML files very easy to understand. This file can make the application very reliable and improve its performance. The following is an example of JSX:

2. What is the difference between JSX and js?
1.JS: JavaScript, a literal script language
JSX: that is, JavaScript XML -- an XML like syntax for building tags inside React components. (enhance the readability of React program components)

2. Differences:
1. The browser can only recognize ordinary js and ordinary css, but cannot recognize scss or jsx (scss is an extension of css, and jsx can be regarded as an extension of js). Therefore, the function of webpack is to convert scss into css and jsx into js recognized by the browser, and then the browser can be used normally;
2. js itself does not support jsx in react (that is, writing html directly in js files). Now they can write directly because the editor can select the language parsing mode (screenshot will show you later). The correct display of the editor is because although it is js file, editor used jsx parsing mode, so the display is correct
3... jsx file will automatically trigger the editor to parse the current file in jsx mode, so there will be no errors

JSX syntax, like the syntax of directly writing XML in Javascript code, is actually just a syntax sugar. Each XML tag will be converted into pure Javascript code by JSX conversion tools. React officially recommends using JSX. Of course, you can write directly in pure Javascript code, but with JSX, the structure of components and the relationship between components look clearer.