HTML e CSS

escritos em JS???

Logo vc VC?

Cadê o WebStandards?

Durante muitos anos defendi isso:

Não foi foi fácil aceitar isso:

class MeuComponente extends Component {
    render() {
        return <h1>Olá Mundo</h1>
    }
}

Mas se eu aceitei vc tb consegue!

Conceitos chave do ReactJS

Re-render tudo a cada mudança
Virtual DOM
Synthetic Events

Tudo amarrado

A maioria dos frameworks SPA usam:

bindings
observers
templates

para linkar o modelo a um pedaço da tela

AngularJS

Inovação

JSX
Virtual DOM
Isomorphic Rendering
Unidirectional Flows

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

Com JSX

Sem JSX

HTML é a projeção do estado da aplicação,

Não a fonte da verdade.

Antes do código vamos esclarecer algumas coisas

Flux

npm install -g create-react-app

create-react-app my-app

Componentes em forma de função

Componentes em forma de classe