Basic use of JSX

JSX Basic use of

JSX yes JavaScript XML Abbreviation , It means that JavaScript The code says XML ( HTML） Format code

advantage ： Declarative syntax is more intuitive 、 And HTML Structure is the same , Reduce the cost of learning 、 Improve development efficiency

Use steps

1. Use JSX Syntax creation react Elements

const title = <h1> hello JSX </h1>

2. Use ReactDom.render() Method rendering react Elements into the page

ReactDom.render(title, root)

---

Why can be used in scaffolding JSX grammar ?

1. JSX It's not standard ECMAScript grammar , It is ECMAScript Grammar extension of .
2. Need to use babel After compiling and processing , To use... In a browser environment .
3. create-react-app This configuration is already in the scaffold by default , No manual configuration required .
4. compile JSX My bag is @bable/preset-react

---

The embedded JS expression

• Data exists JS in
• grammar ： { JavaScript expression }
• Be careful ： In grammar is Single braces , No Double brace ！ and vue Dissimilarity

import React from "react";
import ReactDOM from "react-dom";

// JSX Use in  JavaScript  expression 
const name = 'Jack'
const title =(
  <h1 className="title">
    Hello, {
     name }
  </h1>
) 
//  Rendering  react  Elements 
ReactDOM.render(title, document.getElementById('root'))

---

JSX List rendering of

If you want to render a set of data , Array should be used map() Method
Be careful ： When rendering the list, you should add key attribute ,key The value of the attribute must be unique
principle ：map() Traverse who , Just add... To anyone key attribute
Be careful ： Try to avoid using index numbers as key
// The list of rendering

const songs = [
  {
    id: 1, name: ' Face without makeup '},
  {
    id: 2, name: ' legend '},
  {
    id: 3, name: ' get rid of-blues '}
]

const list = (
  <ul>
    {
     songs.map( item => <li key={
    item.id}>{
     item.name }</li> ) }
  </ul>
)

---

JSX Style processing for

1. Inline style ——style

<h1 style={
     {
      color: 'red', backgroundColor: 'skyblue' }}>
	JSX  Style processing for 
</h1>

2. Class name ——className 【 recommend 】

<h1 className="title">
	JSX  Style processing for 
</h1>

---

JSX summary

1. JSX yes React The core content .
2. JSX It means that JS The code says HTML structure , yes React Declarative expression .
3. Use JSX Fit embedded JS expression 、 Conditions apply colours to a drawing 、 The list of rendering , Can describe any UI structure .
4. Recommended className The way to JSX Add the style .
5. React Make full use of JS The ability of the language itself to write Ul, Instead of building wheels HTML function .