Shulou(Shulou.com)06/01 Report--

This article mainly introduces "the basic grammar case analysis of react". In the daily operation, I believe that many people have doubts about the basic grammar case analysis of react. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "basic grammar case analysis of react". Next, please follow the editor to study!

Introduce:

We all know that the official recommendation in react uses a JSX syntax similar to the xml we have encountered before, and we need to introduce it in front of react-dom.js when we introduce react.js, and when introducing jsx.js, we must specify type= "babel" to identify the rewritten jsx.js file, as shown in the following code:

I. basic Grammar

We write a div in the index.html file in the project, the code: other related operations are used in the jsx.js file, and we have to switch to our server mode when browsing the page.

II. Constant usage

Let's take a look at the code first, as follows:

Const a = Hello ReactDOM.render ({a}, document.querySelector (".box"))

We can see in the code that ReactDOM.render (html,target [, callback]) renders the content to the specified node, that is, render the constant a to our container with the class name box. We also need to note that we need to add a comma after div when writing.

Internal analysis of the use of variables

Let's take a look at our string of code: let msg = "Hello reactionaries!"; let href = "http://www.baidu.com"; defines a constant b through this string of code: const b = {msg} ReactDOM.render ({b}, document.querySelector (" .box ")) through the code our page will show a memory point of a tag that can jump to Baidu: 1 {} represents entering the execution environment of javascript.

Fourth, do not use jsx grammar, how to write with the grammar provided by react

Let's take a look at a portion of the code, as follows:

Const c = React.createElement ("a", {href: "http://www.baidu.com"}," complex hyperlink") ReactDOM.render ({c}, document.querySelector (".box"))

In the code, we use react instead of JSX syntax to create the syntax of an element, create an a tag, and create a href attribute.

5. Other react methods

Let's take a look at the following method. We can understand it through the code here, which is as follows:

Const d = React.DOM.a ({href: "http://www.baidu.com"}," complex hyperlink 2") ReactDOM.render ({d}, document.querySelector (".box"))

You can see that we use React.DOM.a ({href: "http://www.baidu.com"}," complex hyperlink 2") to create attributes for a tags and href.

VI. Nesting writing method

As for the method of nested writing, we also modify it through the case of something. here is the relevant code:

Const e = nested span nested ReactDOM.render ({e}, document.querySelector (".box"))

7. Use createElement

The code is as follows:

Const f = React.createElement ("div", null, React.createElement ("H2", null, "nesting 2"); ReactDOM.render ({f}, document.querySelector (".box"))

When we use react.js here, we don't have to use jsx syntax, we can also use JavaScript native syntax, and we know by comparison that the performance of using and not using nesting makes it clear that we use less nested code than unused code.

We know that there must be a closing slash Terminator; and we also need to note that style uses two curly braces, the outer curly braces indicate entering the javascript environment, and the inner curly braces indicate the object, which is not the same as the expression of vue.

8. Style setting and expression syntax

Const g = style ReactDOM.render ({g}, document.querySelector (".box"))

By changing the style in the code to another way, the code is as follows:

Const so = {color: "blue", fontSize: "20px", border: "1px solid pink", background: "# ccc"} const h = style 2ReactDOM.render ({h}, document.querySelector (".box"))

The reason why we write this is because there are more styles, but there are separate parts, and the so in the code belongs to the style part, and cunst h belongs to the tag part, so it is the rendering part for ReactDOM.render ().

IX. Keyword conflict

We wrote our style in the index.html in the project, and the code is as follows:

.cn {color:red; font-size: 40px;} / / write const I = class in jsx.js

In the code we directly in the style of the class attribute named class= "cn" is not allowed, here we need to borrow className, for some keywords need to be converted, such as: class to be written as className, label tag's for attribute to be written as htmlFor, if we use the label tag when the attribute is not htmlfor, then it will report an error. So we need to correct it.

10. Array use

Const j = [array one, array two, array three] ReactDOM.render ({j}) document.querySelector (".box")

If we do not have the key attribute in the code when an array has three elements, there will be an error at run time.

If we like the following code, there is a pile of notes directly in the array, then it will be rendered directly to another parent tag, either to the root div or to the div of the parent element of our k. The code is as follows:

Const l = ["array four", "array 5", "array 6"]; ReactDOM.render ({l}) document.querySelector (".box")

If we don't have a tag wrapped in the code, it will be rendered directly to the page.

Use the map function to traverse the array

We can use the following code as a reference in the traversal array: ReactDOM.render (

{l.map ((m) index) = > {return {m}}) document.querySelector (".box") at this point, the study of "basic grammar case analysis of react" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.