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;