Colinha - ReactJS

01-componente-basico-es6.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Componente extends Component {
  render(){
   return(<p>Olá devPleno!</p>) 
  }
}
          
ReactDOM.render(
  <Componente />,
  document.getElementById('root')
)

01b-componente-basico-es5.js

import React from 'react';

const Componente = React.createClass({
  render() {
    return(<p>Olá devPleno!</p>)
  }
})
    
ReactDOM.render(
  <Componente />,
  document.getElementById('root')
)

02-props.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Componente extends Component {
  render(){
   return(<p>Olá {this.props.name}!</p>) 
  }
}
          
ReactDOM.render(
  <Componente name='devPleno' />,
  document.getElementById('root')
)

composicao.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Header extends Component {
  render(){
   return(<p>Sistema de pedidos</p>) 
  }
}
class Footer extends Component {
  render(){
   return(<p>desenvolvido por: Tulio Faria - DevPleno</p>) 
  }
}
class App extends Component {
  render(){
   return(<div>
            <Header />
            <p>Conteúdo</p>
            <Footer />
          </div>) 
  }
}
          
ReactDOM.render(
  <App />,
  document.getElementById('root')
)

prop-types.js

import React, { Component } from 'react'

class Componente extends Component {
  render(){
   return(<p>Olá {this.props.name}!</p>) 
  }
}
          
Componente.propTypes = {
  name: React.PropTypes.string
}