6, hands-on teaching react native practical jsx Introduction

React is composed of Reactjs and React native, of which Reactjs is a front-end frame of Facebook open source, React native is the embodiment of Reactjs thought on native!

JSX is not a new language, it's just a syntactic sugar that allows developers to write HTML syntax in JavaScript. , and finally every HTML tag is translated into JavaScript code to run

1. Environment

2. Loading mode

3. Label HTML tags and Reactjs created by the Component class label (must capitalize the first letter)

4. Conversion Parser

'

react.createelement ("H3", NULL, "input") returns a Reactelement object

5. Executing javascript expressions

var msg= "I am the Oriental Yiu";

'

react.createelement ("H1", null,msg)

6. Notes
single line://
Multiple lines:/* Comment text */

7. Properties

' var msg=

react.createelement ("H1", {width: "10px"}, "I am Oriental Yiu")

8. Extended Properties
 
syntax for using ES6

var props={};
props.foo= "1";
props.bar= "1";

'

react.createelement ("H1", React.__spread ({},props,{foo: "2"}), "Welcome to my Number")

9. Custom attributes (HTML5 gives the scheme, which can be rendered to a page with custom attributes that begin with data-)

10. Display HTML displays a HMTL string instead of an HTML node

with an attribute _html

' <div>{{_html: '

11. Use of Styles

style attribute JS object Outer {} According to JSX syntax inner layer {} is a JavaScript object

12. Event Binding

Note: The OnClick call bind method (set scope, parameter to pass)


# #6, Matching video (): https://yunpan.cn/cYINUwNP6nj57 access password 6890

6, hands-on teaching react native practical jsx Introduction