react - complete version of basic knowledge points (not updated)

main.js

// Basic configuration
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'  //Master page for bringing in other components

ReactDOM.render(<App />, document.getElementById('root'))  //root is in the index.html page of public

App.js

// Basic configuration
import React from 'react'

class App extends React.Component{
  render () {
    return (
      <div>
        <h1>Hello World</h1>
      </div>
    )
  }
}
export default App

JSX

/**
 * 1.Understand that JSX is an object, and the variable = > is finally reflected by React.createElement() 
 * Convert to React elements or React components that the browser can run
 * 
 * 2.jsx Scope of application
 * 2-1.Using variables
 * 2-2.Using expressions
 * 2-3.You can use functions (the return value is required to be a jsx object)
 * 2-4.Nested react elements (components)
 * 
 * When JSX and UI are combined, it can be visually helpful, and,
 * It also allows react to show more useful error and warning messages
 */
=====================  One JSX Is a variable   ===========================
import React from 'react'
class testJsx extends React.Component {
  render () {
    const name = 'Wrold'
    const element = <h1>Hello {name}</h1>
    return (
      <div>
        <h1>{element}</h1>
        {/* It can be displayed on the page, but an error will be reported   <h1> cannot appear as a child of <h1>*/}
      </div>
    )
  }
}
export default testJsx

=====================  Two JSX Is an expression    ===========================
import 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

=====================  Three embedded expressions   ===========================
import 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

=====================  Four JSX Representing objects    ===========================
import React from 'react'

const element = (
  <h1> Hello Wrold </h1>
)
function testJsx () {
  return <div>{element}</div>
}
export default testJsx

=====================  Five specific attributes   ===========================
 const a = <div tabIndex='0'></div>
const element = <img src={user.avatarUrl}></img>

// Pay attention to the hump naming method, and remember to add a closed label after using the img label

Introduce component name if testjsx has case, the initial of testjsx should be uppercase

element

1. Element is the most fundamental component of React, and React element is also a common object with minimal creation cost
2. The react element is immutable. Once created, you cannot change its child elements or attributes
3.React only updates the parts it needs to update

=====================  Change element method   ===========================
// Create a new element and pass it in
import 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); // Place at will
  ReactDOM.render(element, document.getElementById('root')); // If this code is not introduced, it will be invalid
  return element  // Missing return code will result in an error
}
export default testJsx

If you like, please give me some encouragement, let me have the motivation to keep updating, thank you very much for your support

Published 3 original articles, won praise 0, visited 88
Private letter follow

Tags: React

Posted on Thu, 16 Jan 2020 08:21:49 -0800 by scratchwax2003