main.js

// Basic configuration import React from 'React' import ReactDOM from 'React -dom' import App from './App' // Main interface for importing other components ReactDOM.render(<App />, document.getelementById ('root')) //root in the public index.html pageCopy the code

App.js

Import React from 'React' class App extends React.Component{render () {return ()<div>
        <h1>Hello World</h1>
      </div>
    )
  }
}
export default App
Copy the code

JSX

/** * 1. Understand that JSX is an object, and the variable => is eventually converted to a React element or component that the browser can run with React. Use variables * 2-2. Use expressions * 2-3. You can use functions (the return value is a JSX object) * 2-4. Nested React elements (components) * * When used in combination with JSX and UI, this is visually helpful, Moreover, * it will make the react to show more useful error and warning messages * / = = = = = = = = = = = = = = = = = = = = = a JSX is a variable = = = = = = = = = = = = = = = = = = = = = = = = = = = the import the react from 'react' class testJsx extends React.Component { render () { const name = 'Wrold' const element =<h1>Hello {name}</h1>
    return (
      <div>
        <h1>{element}</h1>{/* Can be displayed on the page, but an error will be reported<h1> cannot appear as a child of <h1>* /}</div>
    )
  }
}
export default testJsx
Copy the code

= = = = = = = = = = = = = = = = = = = = = 2 JSX is an expression = = = = = = = = = = = = = = = = = = = = = = = = = = = the import the React from 'React' const user = {a: 'Hello', b: 'Wrold' } const a = false function testJsx () { if (a) { return<h1>{user.a + user.b},a new day</h1>
  } else {
    return <h1>a strange day</h1>
  }
}
export default testJsx
Copy the code

= = = = = = = = = = = = = = = = = = = = = three embedded expressions = = = = = = = = = = = = = = = = = = = = = = = = = = = the import the React from 'React' function Add (user) {return user. A + ' ' + user.b } const user = { a: 'Hello', b: 'Wrold' } const element = (<h1>
    {Add (user)}!!!! 
  </h1>
)
function testJsx () {
  return (
    <div>
      {element}
    </div>
  )
}
export default testJsx
Copy the code

= = = = = = = = = = = = = = = = = = = = = 4 JSX said object = = = = = = = = = = = = = = = = = = = = = = = = = = = the import the React from 'React' const element = (<h1> Hello Wrold </h1>
)
function testJsx () {
  return <div>{element}</div>
}
export default testJsx

Copy the code
= = = = = = = = = = = = = = = = = = = = = five specific attributes = = = = = = = = = = = = = = = = = = = = = = = = = = = = const a<div tabIndex='0'></div>
const element = <img src={user.avatarUrl}></img>// The img tag should be closedCopy the code

Importing component names If testJsx has case, the testJsx first letter should be capitalized

The element

1. The react element is the most basic component of the React element. The react element is a common object that can be created with minimal overhead. Once created, you can’t change its child elements or attributes. 3.React only updates what it needs to update

= = = = = = = = = = = = = = = = = = = = = change element method = = = = = = = = = = = = = = = = = = = = = = = = = = = / / create a new element and to import the React from 'React' import ReactDOM from 'react-dom' function testJsx() { const element = (<div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>); setInterval(testJsx, 1000); Reactdom.render (Element, document.getelementById ('root')); } export default testJsx export default testJsxCopy the code

If you like, please give me some encouragement, so that I have the motivation to adhere to the update, for your support is very grateful