react- basic knowledge full version (not finished updating)

main.js

// 基本配置
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'  //用于将其他组件引入的主页面

ReactDOM.render(<App />, document.getElementById('root'))  //root在public的index.html页面中

App.js

// 基本配置
import React from 'react'

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

JSX

/**
 * 1.理解JSX是对象，变量=> 最终被 React.createElement() 
 * 转化成浏览器能够运行的 React元素或React组件
 * 
 * 2.jsx适用范围
 * 2-1.使用变量
 * 2-2.使用表达式
 * 2-3.可以使用函数（返回值要求是jsx对象）
 * 2-4.嵌套react元素（组件）
 * 
 * 当JSX和UI组合使用时，会在视觉上有辅助作用，而且,
 * 它还会使react展示出更多有用的错误和警告消息
 */
=====================  一 JSX 是一个变量   ===========================
import React from 'react'
class testJsx extends React.Component {
  render () {
    const name = 'Wrold'
    const element = <h1>Hello {name}</h1>
    return (
      <div>
        <h1>{element}</h1>
        {/* 可以在页面显示，但是会报错   <h1> cannot appear as a child of <h1>*/}
      </div>
    )
  }
}
export default testJsx

=====================  二 JSX 是一个表达式    ===========================
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

=====================  三 嵌入表达式   ===========================
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

=====================  四 JSX 表示对象    ===========================
import React from 'react'

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

=====================  五 特定属性   ===========================
 const a = <div tabIndex='0'></div>
const element = <img src={user.avatarUrl}></img>

// 注意使用驼峰命名法，img标签使用后记得加闭合标签

If testJsx introduced component name is case-sensitive, then the first letter should be capitalized TestJsx

element

1. The most fundamental element is to react constitution, React element is also the cost of creating a minimum of common objects
2.React elements is immutable. Once created, you can not change its child elements or attributes
3.React update only part of it needs to be updated

=====================  改变元素方法   ===========================
// 创建一个全新的元素并将其传入
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); // 放置位置随意
  ReactDOM.render(element, document.getElementById('root')); // 缺少引入这个代码将会失效
  return element  // 缺少return代码将会报错
}
export default testJsx

Like it, please give me some encouragement, so I have an incentive to adhere to update, grateful for your support