react (二) --编写Hello world

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

1、首先我们在一个 HTML 页面中添加一个 id=“example” 的

:

<div id="example"></div>

2，渲染组件
方法一：使用function

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}

方法二：使用class

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
 

在编写组件时，render函数return的jsx，最外层只能有一个div或者其他元素,这一点和vue组件很类似。但是包裹的这个div会在页面中渲染出来，怎么避免呢？
方法如下：

import React, { Component } from 'react';


class Welcome extends Component{
    render (){
        return (
            <React.Fragment>
                <h1>Hello world</h1>
                <h1>Hello world</h1>
            </React.Fragment>
            
        )
        
    }
}
export default Welcome;