João Batista

Acessor de Projetos

JsBatista

João Batista

Gabriel Freire

Diretor de Projetos

gabrielfvale

Gabriel Freire

?

O que?

Como?

Por que?

Declarative

Component Based

Write Once,

Use Anywhere

"Learn Once,
Write Anywhere"

Stateful Components

Stateless Components

import React from 'react';

const user = (props) => {
    return(
        <div>
            <p>Oi, eu sou um usuário e meu nome é {props.name}!</p>
        </div>
    );
}

export default user;

Users.js

import React, { PureComponent } from 'react';
import User from './User';

class App extends PureComponent {
  render () {
    return (
      <div>
        <User name="Rogerio"/>
      </div>
    );
  }
}

export default App;

App.js

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';

ReactDOM.render(<App title="Relevant Persons" />,
    document.getElementById('root'));

class App extends PureComponent {
  render () {
    return (
      <div>
        <User name="Rogerio"/>
        <User name="Roberval">
        <h1>Catálogo:</h1>
        <Catalogo produtos={...}>
      </div>
    );
  }
}

App.js

Stateful Components

Stateless Components

class Timer extends React.Component {
  state = {
      seconds: 0
  };

  tick() {
    this.setState(prevState => ({seconds: prevState.seconds + 1 }));
  }

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

Timer.js

class Timer extends React.Component {
  state = {
      seconds: 0
  };
    ...

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }

Component LifeCycle

Inicia Props e States

Component Will Mount

render

Component Did Mount

Should Component Update

Component Will Update

render

Component Did Update

Component Will Receive Props

Component Lifecycle

componentWillMount(){...}

componentDidMount(){...}

componentWillUpdate(nextProps, nextState){...}

componentDidUpdate(){...}

Virtual DOM

Github Users

React

Angular

Vue

React

Angular

Vue

Angular Core

React Native

React

?

Mobile Web App

HTML 5 App

Hybrid App

Real Mobile App

Main

Javascript

Main

Javascript

Ponte

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}