2020-01-17

main.js

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

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

App.js

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

class App extends React.Component{
  render () {
    return (
      

        
Hello World
      
    )
  }
}
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 = 
Hello {name}
    return (
      

        
{element}
        {/* 可以在页面显示，但是会报错   
 cannot appear as a child of 
*/}
      
    )
  }
}
export default testJsx

在这里插入图片描述

=====================  二 JSX 是一个表达式    ===========================
import React from 'react'
const user = {
  a: 'Hello',
  b: 'Wrold'
}
const a = false
function testJsx () {
  if (a) {
    return 
{user.a + user.b},a new day
  } else {
    return 
a strange day
  }
}
export default testJsx

在这里插入图片描述

=====================  三 嵌入表达式   ===========================
import React from 'react'
function Add (user) {
  return user.a + ' ' + user.b
}
const user = {
  a: 'Hello',
  b: 'Wrold'
}
const element = (
  

    {Add (user)}!!!! 
  
)
function testJsx () {
  return (
    

      {element}
    
  )
}
export default testJsx

在这里插入图片描述

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

const element = (
  
 Hello Wrold 
)
function testJsx () {
  return 
{element}
}
export default testJsx

=====================  五 特定属性   ===========================
 const a = 

const element = 

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

引入组件名称如果testJsx有大小写，则TestJsx首字母应该大写

元素

1.元素是react中最根本构成，React 元素也是创建开销极小的普通对象
2.React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性
3.React 只更新它需要更新的部分

=====================  改变元素方法   ===========================
// 创建一个全新的元素并将其传入
import React from 'react'
import ReactDOM from 'react-dom'

function testJsx() {
  const element = (
    

      
Hello, world!
      
It is {new Date().toLocaleTimeString()}.
    
  );
  setInterval(testJsx, 1000); // 放置位置随意
  ReactDOM.render(element, document.getElementById('root')); // 缺少引入这个代码将会失效
  return element  // 缺少return代码将会报错
}
export default testJsx

在这里插入图片描述

喜欢的话就请给我一些鼓励，让我有动力坚持更新，对于您的支持感激不尽