react-基本的な知識のフルバージョン（完成品ではない更新）

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标签使用后记得加闭合标签

testJsx導入コンポーネント名は大文字と小文字が区別される場合、最初の文字は大文字TestJsxなければなりません

要素

1.最も基本的な要素は、要素が、共通の最小値を作成するコストであるオブジェクトを反応させ、構成を反応させることである
2.React要素は不変です。作成したら、その子要素を変更したり、属性をすることはできません
、それの一部のみを更新する必要がある3.Reactアップデートを

=====================  改变元素方法   ===========================
// 创建一个全新的元素并将其传入
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

それと同じように、私にいくつかの励ましを与えるので、私は更新を遵守するインセンティブを持って、ご支援に感謝して下さい