Instrutor

Redes Sociais

Acompanhe o instrutor nas redes sociais!
Facebook - Medium - Twitter - LinkedIn

Conhecendo React.js

React é uma biblioteca open-source desenvolvida pelo Facebook, para construção de interfaces(Componentes) em JavaScript com alta performance que permite composição e modularização de uma maneira muito simples.

Conhecendo React.js

• Versão atual: 16.X
• Criada por: Jordan Walke, engenheiro do Facebook
• Primeiro release: Maio de 2013 na JSConf US
• Utilizado por grandes empresas: Facebook, Instagram, Netflix, Sony etc...
• Criação de interfaces com JavaScript
• Interface reflete o estado da aplicação
• Criação de componentes reutilizáveis de forma declarativa, modular e de fácil composição
• Alta performance
• Padronização de desenvolvimento
• Fácil manutenção
• Permite renderização no servidor - bom para SEO
• Ecossistema moderno de desenvolvimento (Node, npm, babel, webpack, gulp etc... )
• Taxa de adoção crescendo muito rápida pela comunidade JavaScript
• Tudo é JavaScript

Mas pra que serve?

O React foi desenvolvido com a seguinte missão:

"Como construir grandes aplicações com muitos dados que mudam frequentemente?"

• Focar somente na View
• Utilizar o Virtual DOM
• Trabalhar com componentes

SPA - Single Page Application

São aplicações que carregam apenas uma vez a estrutura inicial e depois todas as outras ações/requisições/navegações são feitas via ajax.
Exemplos: Facebook, Gmail

Legal, mas... Como tudo isso funciona?

Como já dizia o Jack:

“Vamos por Partes”

Exercício 1

Objetivo

Criar um aplicativo com o create-react-app

1. Abrir o terminal
2. Escolher um diretório
3. Executar o comando

   create-react-app nome_do_projeto

4. Fazer networking enquanto ele cria o seu projeto =)
5. Abrir o projeto no seu editor de texto
6. Voltar ao terminal e subir o projeto com o comando

   npm start

7. Alterar a mensagem para “O curso de React é demais”

create-react-app

O create-react-app é um pacote que nos permite criar aplicações web utilizando o React sem a necessidade fazer qualquer configuração. Todas as ferramentas necessárias para desenvolvimento e deploy já estão embutidas.

Alguns dos plugins já configurados:

• auto-prefixer
• eslint
• webpack
• babel
• jest

Estrutura do Projeto

Componentes Padrões

Para que o desenvolvedor não comece a desenvolver os componentes do zero, o projeto padrão já vem criado com alguns componentes para inspirar e servir como exemplo:

Package.json

O package.json é o arquivo que descreve a sua aplicação. Ele contém informações importantes, como o nome do projeto, autor, data, versão, e-mail e a declaração de suas dependências.

              {
                "dependencies": {
                  "react": "^15.5.4",
                  "react-dom": "^15.5.4"
                },
                "scripts": {
                  "start": "react-scripts start",
                  "build": "react-scripts build",
                  "test": "react-scripts test --env=jsdom",
                  "eject": "react-scripts eject"
                }
              }
            

Comandos npm

Exercício 2

Objetivo

Criar um novo componente na aplicação

1. Criar um novo arquivo javascript
2. Usar a estrutura do App.js para montar um novo Componente
3. Inserir o novo componente dentro do App
4. Exibir com sucesso na tela o novo Componente

Projeto 1

Objetivo

Vamos criar a aplicação de "todo-list" utilizando apenas create-react-app

Componentes React

Há três tipos de componentes React

1. React.createClass
2. Componentes de classe
3. Componentes sem estado

Componentes de classe

Todo componente precisa de 3 coisas:

• importar o módulo React e o Component (classes)
• estender o Component
• ter o método render() que retorna o HTML que deve ser renderizado

HTML no JavaScript

A sintaxe do JSX nos permite escrever o HTML no JavaScript!

              class App extends Component { 
                render() {
                  return (
                    

                      

                        
                        
Welcome to React
                      
                      

                        To get started, edit src/App.js and save to reload.
                      
                    
                  );
                }
              }
            

ReactDOM

O ReactDOM é o responsável por fazer a ponte entre o React e o HTML

              import React from 'react';
              import ReactDOM from 'react-dom';
              import './index.css';
              import App from './App';
              import registerServiceWorker from './registerServiceWorker';
              
              ReactDOM.render(, document.getElementById('root'));
              registerServiceWorker();
            

Só preciso disso?

Sim. Este é o mínimo necessário para se criar um Componente. Para componentes mais complexos, utilizamos Estados (States) e Propriedades (Props).

Propriedades

As propriedades são simples atributos que passamos para nossos componentes!

              class App extends Component {
                render() {
                  return (
                    
                  );
                }
              }
            

Propriedades

No componente em questão, podemos acessar esta propriedade e usá-la!

              class Example extends Component {
                render() {
                  return (
                    
{this.props.texto}
 
                  );
                }
              }
            

Estados

Estados guardam informações sobre o seu componente durante um período

Como por exemplo em um componente de relógio: para cada segundo você precisa atualizar o seu estado para poder mostrar a informação correta na tela

DEMO

Como usar os estados para atualizar um texto de acordo com o input do usuário

Estados

Toda vez que apertamos o botão, alteramos o estado do componente e o render é invocado automaticamente

              class App extends Component {
                constructor(props) {
                  super(props);
                  this.state = {
                    input: ''
                  }
                }
              
                render() {
                  return (
                    

                      

                        
                        
Welcome to React
                      
                      

                        To get started, edit src/App.js and save to reload.
                      
                       this.setState({input: event.target.value})} />
                      
                    
                  );
                }
              }
            

Link no Gist

Resumo

1. Estados e Propriedades não são obrigatórios mas ajudam a criar componentes mais inteligentes
2. Propriedades são atributos que passamos para os componentes e acessíveis por meio do this.props.nomeDaPropriedade
3. Estados guardam informações sobre um momento específico do componente. É setado no construtor do componente e atualizado por meio do método setState. Suas informações são acessíveis por meio do this.state.nomePropriedade

Static methods

PropTypes

• Validar as props que são passadas para os componentes
• Evitar bugs desnecessários

PropTypes: Exemplo

            
              import PropTypes from 'prop-types';

              class Greeting extends React.Component {
                render() {
                  return (
                    
Hello, {this.props.name}
                  );
                }
              }
              
              Greeting.propTypes = {
                name: PropTypes.string
              };
            
          

Default Prop Values

• Definir valores default para as props
• Garantir que a prop terá um valor padrão, caso o Componente não tenha especificado a prop em si.

Default Prop Values: Exemplo

          
            class Greeting extends React.Component {
              render() {
                return (
                  
Hello, {this.props.name}
                );
              }
            }
            
            // Specifies the default values for props:
            Greeting.defaultProps = {
              name: 'Stranger'
            };
            
            // Renders "Hello, Stranger":
            ReactDOM.render(
              ,
              document.getElementById('example')
            );
          
        

Default Prop Values: Exemplo com static method

          
            class Greeting extends React.Component {
              static defaultProps = {
                name: 'stranger'
              }
            
              render() {
                return (
                  
Hello, {this.props.name}
                )
              }
            }
          
        

Initial State

O seu componente pode ter um estado inicial ou props iniciais

          
            class Counter extends React.Component {
              constructor(props) {
                super(props);
                this.state = {count: props.initialCount};
              }
              // ...
            }
          
        

Style

Como podemos deixar o texto do componente Example azul?

Inline Styles

Os componentes React utilizam atributos bem semelhantes ao que já estamos acostumados, mas são ligeiramente diferentes. No React os atributos são por padrão CamelCase . Por exemplo:

• background-color → backgroundColor
• background-image → backgroundImage
• allowfullscreen → allowFullScreen

CSS Modules

Habilita o reuso e criação de módulos css que são importados dentro da classe javascript. No qual fica no escopo local do arquivo que referenciou, porém, com um identificador global.

Também é possível usar SASS Modules

Styled components

Toda a criação do CSS estará no javascript. Aliás não haverá mais CSS ou Sass em tempo de desenvolvimento

              class Example extends Component {
                render() {
                  return (
                    
{this.props.texto}
                  )
                }
              }
              
              export default Example;
            

Redux

O que é?

• Criado por Dan Abramov da arquitetura Flux
• Biblioteca que serve como um container de estados
• Single Immutable State Tree (single source of truth)
• State é read-only e só é mutado com Actions (objeto que representa uma mutação de estado)

Redux

Como funciona?

Redux

Actions

São payloads de informação que é enviado para a sua store.

Reducers

Ele específica uma troca de estado em resposta a action que é enviado para a store.

Store

Se a action representa "o que aconteceu" e o reducer atualiza o estado de acordo com as actions.

A store conecta as actions com os reducers.

Data Flow

A arquitetura do Redux gira em torno do fluxo unidirecional de dados.

Projeto Final

Objetivo

Adicionar o redux ao nosso Todo-List

1. Adicionar as seguintes dependências
2. Executar o comando no terminal

   
                   yarn add prop-types react-redux redux redux-thunk
                 

3. Fazer networking enquanto as suas dependências são baixadas :)

1. Criar as seguintes pastas dentro da pasta src/
2. actions
3. components
4. constants
5. containers
6. reducers
7. types

• Seguir o meu gist no github :)

EXTRA

Static Type Checking

Existem alguns type checkers como Flow e TypeScript. Eles identificam problemas antes de executar o seu código.

Material de estudo