Introdução ao React

Curso introdutório a biblioteca do Facebook

Instrutor: Diego Martins de Pinho

Realização: Code Prestige    Apoio: iMasters

A Code Prestige é uma escola especializada no ensino de programação. Desenvolvemos diariamente artigos, cursos, livros digitais, vídeos e outros conteúdos que já auxiliaram mais de 5000 pessoas de todo o Brasil a alcançarem seus objetivos profissionais.

Redes Sociais

Site da Code Prestige

Cursos a distância

Treinamentos para empresas e universidades

Também realizamos treinamentos personalizados para empresas e faculdades. Entre em contato!

Instrutor

Redes Sociais

Requisitos

O que é o React?

O React é uma biblioteca JavaScript para criação de interfaces de usuário em aplicações web, que foi idealizada pelo time de desenvolvimento do Facebook.

  • 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...

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

Legal, mas... Como tudo isso funciona?

Como já dizia o Jack Estripador:

“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:

Estrutura do Projeto

Arquivo Descrição
README.md Arquivo de orientações do create-react-app. Está em inglês.
node_modules/ Todas as dependências necessárias para o projeto.
package.json Arquivo de descrição do projeto. Possui informações como o nome, autor, versão e as dependências.
public/ Diretório que possui os arquivos públicos do seu projeto. Contém o html inicial.
src/ Pasta onde está contido todos os recursos do projeto, arquivos de imagem, css, javascript e afins.

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:

  • App.css
  • App.js
  • App.test.js
  • index.css
  • index.js
  • logo.svg

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

Comando O que faz? Resultado
start Inicia o servidor de desenvolvimento Na porta 3000 e abre o navegador automaticamente
test Inicia a execução dos testes Executa os testes utilizando o Jest e exibe os resultados no próprio console
run build Reúne o aplicativo em arquivos estáticos para produção Compila, traduz, minifica os recursos da aplicação e gera arquivos estáticos
run eject Remove a dependência do “react-scripts” e copia explicitamente as ferramentas de build, configurações e scripts dentro do diretório da aplicação Remove a dependência do “react-scripts” e deixa tudo manual para controle do desenvolvedor

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

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 (
                    
logo

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 Espelho 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 (
                    
logo

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

Extra

Como podemos deixar o texto do componente Espelho 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

              class Espelho extends Component {
                render() {
                  return (
                    

{this.props.texto}

) } } export default Espelho;

O que vimos?

  • Como criar um projeto do zero React do zero
  • Subir o projeto para desenvolvimento
  • Criar um novo Componente
  • Incluir um Componente dentro do outro
  • Passar propriedades de um Componente para outro
  • Mudar o estado de um Componente

Próximos Passos

Agora que você já conhece o básico do React, é importante continuar estudando

  • Ciclo de vida
  • Como lidar com eventos
  • Renderização condicional

Projeto Final

Objetivo

Criar uma página pessoal utilizando o create-react-app

Exemplo

Ver exemplo no CodePen

Prazo

1 Semana

Requisitos

  • A página deve conter pelo menos uma imagem
  • Deve conter pelo menos 3 componentes (além do App.js)

Desafio

Criar a página de forma responsiva utilizando o React Bootstrap

Entrega

A entrega deve ser feita nesta issue do projeto no GitHub

Materiais para estudo

Obrigado pela participação!

Retire o seu certificado clicando aqui