React

Primeiros Passos

O que é React?

Uma biblioteca JS para a construção de UIs

Biblioteca

X

Framework

"Seu código usa a biblioteca,

O Framework usa seu código"

: Interfaces de Usuário

UIs

Visível

Ação Positiva

Componentes

Vamos colocar a

mão na massa!

https://github.com/JsBatista/workshopReact

CodePen

codepen.io

Hello World

create-react-app

nome_do_projeto

hello

cd

nome_do_projeto

hello

npm start

localhost:3000

public

src

App.js

index.js

index.html

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

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

index.js

...
<div id="root"></div>
...

index.html

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code>
        </p>
      </div>
    );
  }
}

export default App;

App.js

import React, { Component } from 'react';

class App extends Component {

  render() {
    return (
      <div>

        <p>Hello World!</p>
        
      </div>
    );
  }

}

export default App;

App.js

Salvar

Parar o Servidor

Recarregar a Página

Reiniciar o Servidor

Olhar a localhost:3000

CheckPoint 1

Vamos criar nosso primeiro componente!

Estruture bem a arquitetura

do seu projeto!

Separe seus componentes

1 componente - 1 pasta

NomeComponente = NomePasta

Começar com letra maiúscula

NomeComponente = NomeArquivo

import React, {Component} from 'react';

class HelloUser extends Component {

    render(){

        return(

            <div>

            </div>

                <p>Bom dia {this.props.name}!</p>

);

};

export default HelloUser;

HelloUser.js

import React, {Component} from 'react';

class App extends Component {

  render() {
    return (
      <div>

        <p>Hello World!</p>

App.js

        <HelloUser />

      
      </div>
    );
  }

}

export default App;

import HelloUser from './Components/HelloUser/HelloUser';

import React, {Component} from 'react';

class App extends Component {

  render() {
    return (
      <div>

        <p>Hello World!</p>

App.js

        <HelloUser name="Gabriel Suassuna"/>

      
      </div>
    );
  }

}

export default App;

import HelloUser from './Components/HelloUser/HelloUser';

CheckPoint 2

class App extends Component {

  render() {
    return (
      <div>

        <p>Hello World!</p>

        <HelloUser name="Gabriel Suassuna"/>

      
      </div>
    );
  }

}

        <HelloUser name="Vinicius Somebody"/>

        <HelloUser name="Pedro Victor"/>

        <HelloUser name="Matheus Navarro"/>

        <HelloUser name="Luan Carvalho"/>

        <HelloUser name="Hariamy Vasconcelos"/>

        <HelloUser name="João Pedro Delgado"/>

App.js

        <HelloUser name="Gabriel Freire"/>

class App extends Component {

  render() {

      
      </div>
    );
  }

}

  const listaDeMembros = ["Gabriel Suassuna", 
  "Vinicius Somebody",...,"João Pedro Delgado"];

  const listaDeComponentes = listaDeMembros.map((atual)=>{
      return <HelloUser name={atual}/>
  });

  return (
      <div>

        <p>Hello World!</p>

        {listaDeComponentes}

App.js

CheckPoint 3

...

const listaDeComponentes = listaDeMembros.map((atual)=>{
      return <HelloUser name={atual} key={atual}/>
    });

...

Tipos de Componentes

Stateful Components

Stateless Components

Apenas o Necessário

Não precisa de estado? Não seja Stateful

Estados manipulados pelos componentes certos

Use Stateful components apenas quando necessário

Containers são Stateful

3 Perguntas

Manipula dados dinamicamente?

Isso é responsabilidade dele?

É um container?

App.js

Manipula dados dinamicamente?

Isso é responsabilidade dele?

É um container?

HelloUser.js

Manipula dados dinamicamente?

Isso é responsabilidade dele?

É um container?

import React, {Component} from 'react';

class HelloUser extends Component {

    render(){
        return(
            <div>
                <p>Bom dia {this.props.name}!</p>
            </div>
        );
    };

}

export default HelloUser;

HelloUser.js

HelloUser.js

import React from 'react';

const helloUser  = (         ) => {

     return(

         <div>
            <p>Bom dia                !</p>
        </div>

  props

{props.name}

     );
}

export default helloUser;

Eventos

Triggers

Listeners

Callbacks

)

HelloMaker

Cria novos HelloUsers

HelloUsers personalizados

Escalável

HelloMaker.js

Manipula dados dinamicamente?

Isso é responsabilidade dele?

É um container?

import React,{Component} from 'react';

class HelloMaker extends Component {

    render(){

        return(
            <div>

                <input type="text" />
                <button>Diga bom dia!</button>

            </div>
        );
    };
}

export default HelloMaker;

HelloMaker.js

import React, { Component } from 'react';
import HelloUser from './Components/HelloUser/HelloUser';

import HelloMaker from './Components/HelloMaker/HelloMaker';

class App extends Component {

  state = {
    listaDeMembros: ["Gabriel Suassuna",...,"João Pedro Delgado"];
  }
  render() { 
        const listaDeComponentes = this.state.listaDeMembros.map((atual)=>{
          return <HelloUser name={atual} key={atual}/>
        });

        return (

    );
  }

}

export default App;

          <div>
            <p>Hello World!</p>
            <HelloMaker />
            {listaDeComponentes}
          </div>

App.js

CheckPoint 4

HelloMaker

App

Recebe o valor do input

Guarda no estado

Passa valor para App

Incrementa ListaDeMembros

Zera valor do input

  ... 
  state = {
    listaDeMembros: ["Gabriel Suassuna", ... ,"João Pedro Delgado"]
  }

 
  render() { 
    const listaDeComponentes  = ...

    return (
      <div>
        <p>Hello World!</p>

        <HelloMaker createNewHelloUser={this.createNewHelloUser}/>

  createNewHelloUser = (newUser) => {

   let listaTemporaria = [...this.state.listaDeMembros];

    listaTemporaria.push(newUser);

    this.setState({

      listaDeMembros: listaTemporaria
    });

...

App.js

ListaDeMembros:

Gabriel Suassuna

Vinicius Somebody

Pedro Victor

Matheus Navarro

Luan Carvalho

Hariamy Vasconcelos

João Pedro Delgado

Gabriel Freire

createNewHelloUser(Gabriel Freire)

ListaTemporaria:

Gabriel Suassuna

Vinicius Somebody

Pedro Victor

Matheus Navarro

Luan Carvalho

Hariamy Vasconcelos

João Pedro Delgado

Gabriel Freire

setState()

class HelloMaker extends Component {

    state = {
        currentValue: ""
    }

    updateCurrentValue = (event) => {

        this.setState({

            currentValue: event.target.value
        });
    }

    triggerCreateNewHelloUser = () => {

        this.props.createNewHelloUser(this.state.currentValue);

        this.setState({
            currentValue: ""
        });
    }

HelloMaker.js

...

    render(){
        return(
            <div>

            </div>
        );
    };

               <input

                     onChange={this.updateCurrentValue}

                     type="text"

                 <button

                     Diga bom dia!

                 </button>

                     value={this.state.currentValue} />

                     onClick={this.triggerCreateNewHelloUser}>

HelloMaker.js

createNewHelloUser()

HelloMaker

App

createNewHelloUser()

triggerCreateNewHelloUser()

this.props.createNewHelloUser()

createNewHelloUser()

props

CheckPoint 5

Two-Way Data

Binding

Valor Input

Valor Estado

Two-Way Data

Binding

<input

    onChange={this.updateCurrentValue}

    type="text"

    value={this.state.currentValue} />

updateCurrentValue = (event) => {

    this.setState({

        currentValue: event.target.value    
    });
}

HelloMaker.js

WorkShop React - 02 - Primeiros Passos

By João Batista

WorkShop React - 02 - Primeiros Passos