React之简单渲染

渲染

1.index.js 中的简单的渲染界面

import React from 'react'
import ReactDom from 'react-dom'
const Item=<div>hello </div>
ReactDom.render(
    item,
    document.querySelector('#root')
)

import React from 'react'
import ReactDom from 'react-dom'
const Item = () => {
    return  <div>hello</div>

}
ReactDom.render(
    item (),
    document.querySelector('#root')
)

箭头函数写法：

import React from 'react'
import ReactDom from 'react-dom'
const Item = (props) => {
    return  <div  title='abccc'>hello {props.title}</div>

}
ReactDom.render(
    item ({
        title: 'React'
    }),
    document.querySelector('#root')
)//hello React

import React from 'react'
import ReactDom from 'react-dom'
const Item = (props) => {
    return <div title={props.title}>hello {props.title}</div>

}
ReactDom.render(
    item ({
        title: 'React'
    }),
    document.querySelector('#root')
)

2.组件渲染：

import React from 'react'
import ReactDom from 'react-dom'
//React 组件；函数式组件；组件名首字母大写
const Item = (props) => {
    return <div title={props.title}>hello {props.title}</div>

}
ReactDom.render(
    <Item title="React"/>,
    document.querySelector('#root')
)

类(class)组件

必须实现render( )方法

import React from 'react'
//结构赋值的方法，可以直接使用里面的render函数
import { render } from 'react-dom'
//类组件1
class App extends React.Component {
    render () {
        return <h1>Hello</h1>
    }
}
render(
    <App/>,
    document.querySelector('#root')
)

import React from 'react'
import { render } from 'react-dom'
//类组件2
class App extends React.Component {
    render () {
        return <h1>Hello</h1>
    }
}
const app = new App().render()
render(
    app,
    document.querySelector('#root')
)