React元素渲染

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

//使用JSX语法可以创建元素
//let word = <h1>这是一个元素</h1>

// let app=<App/> 这是一个组件

//let root= document.getElementById('root')  这是一个DOM对象

//ReactDOM.render(word,document.getElementById('root'));

//render 方法渲染一个组件或者元素，元素作为组件的最小单位，JSX元素对象或者组件对象，必须只有一个
//根节点
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
//reportWebVitals();


//实现时刻显示


// function clock(){
//   let time = new Date().toLocaleTimeString()
//   let ele = (

//   //   <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

//   //   <div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。  
//    <div>
//     <h1>The Time is {time}</h1>
//     <h2>This is subtitle  </h2>
  
//   </div>)
//   let root = document.querySelector('#root')
//   ReactDOM.render(ele,root)

// }

// clock()

// //使用间隔函数每秒刷新

// setInterval(clock,1000)


//react 函数式组件
function Clock(props){
  return (
    <div>
          <h1>The Time is { props.date.toLocaleTimeString() }</h1>
          <h2>函数式组件开发  </h2>
    </div>
  )
}

function run(){
  ReactDOM.render(
        <Clock date={new Date()} />,
        document.querySelector('#root')

  )

}

setInterval(run,1000)