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

This article mainly explains "how to create and render React elements". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to create and render React elements.

React is a JavaScript library for building user interfaces

It includes two libraries: react.js and react-dom.js

The core library of react.js:React, which provides the core functions of React.js, such as creating React components, component lifecycle, etc.

React-dom.js: provides DOM functions to interact with browsers, such as rendering components to a page

React and ReactDOM

We can use react.js and react-dom.js in HTML by introducing react.js and react-dom.js through the official CDN link

React is the entrance to the React library. If you load React by using tags, you can get the top-level API of React through the React global variable object

If you introduce react-dom with a tag, all top-level API can be called on the global ReactDOM

Let's take a look at what React and ReactDOM are:

Console.log (React) console.log (ReactDOM)

React

ReactDOM

You can see that there are two objects, and there are many methods, so there is no need to delve into each method for the time being.

The first experience of React

First of all, we introduce react.js react-dom.js into html

Currently our code is written in html, so both libraries are introduced through the script tag (I won't go into more detail later)

Then we add a root element to the interface:

If we want to add a text such as: Hello,React! to the root element, we can do this:

Hello,React!

Now use React to render the title to the page

We need to use the API: ReactDOM.render () provided by ReactDOM

ReactDOM.render ("Hello, React!", document.getElementById ("root"), () = > {console.log ("execute callback function" after rendering);})

In fact, the render method accepts three parameters:

Content to render ("Hello, React!")

The receiving container of the rendered content (the root element here)

Optional callback function (the callback function is executed after the content is rendered)

Create a React element

What if what we want to render is a heading H2 or a paragraph p, or even more complex element nesting?

Hello,React!

It's too easy to learn React for the first time.

Hello,React!

It's too easy to learn React for the first time.

React provides the API that creates and returns the React element:

React.createElement (type, [props], [... children])

This method accepts three parameters:

Type: specify element types, such as'H2','p'

Props: optional parameter, the attribute value of the element to the object, such as

{className: 'bg-red', id:' title'}

Optional parameters, child elements of the element

Create an element and render to the specified container

Const H2 = React.createElement ("H2", null, "Hello,React!"); const p = React.createElement ("p", null, "it's too easy to learn react for the first time"); const header = React.createElement ("header", {id: "title"}, H2); const section = React.createElement ("section", null, p); const div = React.createElement ("div", null, header, section)

Render to the root element:

ReactDOM.render (div, document.querySelector ("# root"))

Be careful

The 1.render method can accept React elements created by createElement as render objects

The 2.render method belongs to the ReactDOM object

The 3.createElement method belongs to the React object

JSX

It's a bit troublesome to create every React element with createElement. Is there a simpler way?

In fact, for:

Const H2 = React.createElement ("H2", null, "Hello,React!"); const p = React.createElement ("p", null, "it's too easy to learn react for the first time"); const header = React.createElement ("header", {id: "title"}, H2); const section = React.createElement ("section", null, p); const div = React.createElement ("div", null, header, section)

It can be written as follows:

Const H2 = Hello.Reactworthiness Const p =

It's too easy to learn react for the first time.

; const header = (Hello,React!); const section = (

It's too easy to learn react for the first time.

); const div = (Hello,React!

It's too easy to learn react for the first time.

);

This tag syntax is neither a string nor a HTML

It is called JSX, which is a syntactic extension of JavaScript.

In fact, each JSX element has a syntax sugar, and they eventually call the React.createElement (component, props,... children) method to create the React element. But it's easier and more intuitive for us to write.

The first experience of JSX

We rewrite all the elements created by createElement into JSX

Get the following complete HTML page

Static Template const H2 = Hello.reactals; const p =

It's too easy to learn react for the first time.

; const header = (Hello,React!); const section = (

It's too easy to learn react for the first time.

); const div = (Hello,React!

It's too easy to learn react for the first time.

); ReactDOM.render (div, document.querySelector ("# root"))

When you open it in a browser, you will find that the elements on the page have not been rendered correctly

And the console outputs an error: Uncaught SyntaxError: Unexpected token'

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.