How to React

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

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

Componente com JSX

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')
);

@icarcal

Elementos

Elementos descrevem o que você vê na tela

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

São imutáveis

São atualizadas somente as partes necessárias e não todo o elemento

@icarcal

Componentes

São como peças de "lego" que juntas formam a sua aplicação

São como funções do javascript que retornam elementos

São independentes e reutilizáveis

@icarcal

Tipos de componentes

Função

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Classe (ES6)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

@icarcal

Props

São atributos recebidos pelo componente

São read-only

Todos os componentes devem funcionar como funções puras, respeitando (sem modificar) os props

@icarcal

Como funcionam as props?

class HelloMessage extends React.Component {
  render(props) {
    // neste caso, podemos utilizar o this.props
    // ou somente props

    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

Ao utilizar um componente, passe a propriedades que deseja como atributos e, dentro do componente, utilize-as através do this.props ou props (capturado do render)

@icarcal

Ciclo de vida dos componentes

@icarcal

Ciclo de vida dos componentes

@icarcal

State

É o estado do componente

Os componentes podem ter ou não um estado, sendo chamados de containers e stateless respectivamente

É responsável pelo update do componente

Quando o componente tem o estado alterado ele é renderizado novamente

@icarcal

Como utilizar o state?

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);