react练习

1. 带有自己名字的HelloMessage组件，名字通过props传递。

import React from 'react'
import ReactDOM from 'react-dom'

function ShowMsg({name}) {
  return (
    
Hello, {name}
  )
}

const Hello = React.createClass({
  getInitialState() {
    return {
      msg: 'Long'
    }
  },
  handleInput(e) {
    this.setState({msg: e.target.value})
  },
  render() {
    return (
      

        
        
      
    ) 
  } 
})

ReactDOM.render(
  ,
  document.getElementById('container')
)

2. 一个背景色为绿色的盒子，3秒后颜色变为红色。

index.css

* {
    margin: 0; padding:0;
}

.box {
    width: 200px; height:200px; 
    margin: -100px -100px; position: fixed; top: 50%; left: 50%;
}

index.js

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

class Box extends React.Component {

    constructor(props) {
        super(props)
        this.state = {c: 'green'}
        this.change = this.change.bind(this)
    }

    componentDidMount() {
        setTimeout(
            () => this.change(),
            3000
            )
    }

    change() {
        this.setState({
            c: 'red'
        })
    }

    render() {
        return (
            

            )
    }
}

ReactDOM.render(
    ,
    document.getElementById('root')
)