#VemProReact #JEP #1

#SejamBemVindos

#VemProReact

Quem sou eu?

Daniel Professor Xavier

https://www.linkedin.com/in/danieljxavier/

  • Líder de desenvolvimento
  • Especialista em JavaScript
  • Um cara que acredita que um grande desenvolvedor é muito mais do que alguém que escreve códigos
  • Princípio de desenvolvimento: KISS

O que importa aqui:

Sou o carinha que vai te ajudar a aprender React!   \o/

#VemProReact

O que vamos aprender?

  • HTML, CSS e JavaScript
     
  • O principal de uma aplicação React
     
  • Principais conceitos de ES6
     
  • Como trabalhar com o Bayon
     
  • GraphQL + Apollo Client
     
  • Testes unitários com Jest e React Testing Library

#VemProReact

React

É de comer?

#VemProReact

React

É de comer?

#VemProReact

React

É uma linguagem de programação?

#VemProReact

React

É uma linguagem de programação?

#VemProReact

React

É um framework?

#VemProReact

React

Ou é uma library?

#VemProReact

React

É uma library!

"Uma biblioteca JavaScript para criar interfaces de usuário"

Fonte: https://pt-br.reactjs.org/

#VemProReact

Momento "Uai É"?

Library: É um conjunto de funções que pode ser usado onde e quando quiser

Framework: É um conjunto de funções que deve ser usado de uma forma específica

Na prática: uma library, geralmente, te dá mais liberdade no desenvolvimento

#VemProReact

React

Pra que serve?

#VemProReact

React

Na teoria:

Para criar uma página web interativa e impressionar os coleguinhas

#VemProReact

React

Na prática:

Para desenvolver sistemas incríveis, complexos e se divertir com isto

#VemProReact

React

Consigo fazer tudo isto só com HTML, CSS e JavaScript?

#VemProReact

React

Claro que SIM!

WTF?!?

#VemProReact

React

Então, por que usar React?

#VemProReact

React

Componentes?

#VemProReact

React

Componentes?

Sim!

Você pode dividir sua aplicação da maneira que achar melhor, facilitando a manutenção

#VemProReact

React

Controle de estado?

#VemProReact

React

Sim!

Você pode dar inteligência para sua aplicação e poupar muito esforço

Controle de estado?

#VemProReact

React

Reatividade?

#VemProReact

React

Reatividade?

Sim! Claro!

Você pode compartilhar informações entre diversas partes da aplicação e atualizar todas de uma vez só

#VemProReact

React

Mercado?

#VemProReact

React

Mercado?

Sim!

O mercado Front End está em alta e deve continuar assim por um bom tempo

#VemProReact

React

Mercado?

Sim!

O mercado Front End React está em alta e deve continuar assim por um bom tempo

#VemProReact

React

Softplan?

#VemProReact

React

Softplan?

Sim, claro!

Já existe muita demanda de Front-End aqui e deve continuar assim por um bom tempo

#VemProReact

React

O que eu preciso para começar?

#VemProReact

React

  • Dominar HTML
  • Dominar JavaScript
  • Aprender o básico de CSS
  • Saber se virar com o npm (ou melhor: Yarn)
  • Saber usar o Google (de preferência, "in English")

#VemProReact

React

  • Dominar HTML
  • Dominar JavaScript
  • Aprender o básico de CSS
  • Saber se virar com o npm (ou melhor: Yarn)
  • Saber usar o Google (de preferência em inglês)

Na verdade, você só precisa ter:

UM EDITOR DE TEXTO E VONTADE DE APRENDER

#VemProReact

React

Bó começar então!

#VemProReact

HTML

  • É uma linguagem de programação marcação
  • É a base de qualquer projeto web
  • É a estrutura da sua página

HyperText Markup Language

Referências para estudos:

https://www.w3schools.com/html/

https://developer.mozilla.org/en-US/docs/Web/HTML

#VemProReact

HTML

Exemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>#VemProReact</title>
    </head>
    <body>
        <h1>#VemProReact #1</h1>
        <p>Esta é nossa primeira aula!</p>
    </body>
</html>

#VemProReact

CSS

  • É uma linguagem extremamente simples
  • Trabalha com a estrutura de chave/valor
  • É o que vai definir os estilos da sua aplicação

Cascading Style Sheets

Referências para estudos:

https://www.w3schools.com/css/

https://developer.mozilla.org/en-US/docs/Web/CSS

#VemProReact

CSS

Exemplo:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

#VemProReact

JavaScript

  • É uma linguagem de programação interpretada
  • É baseada em objetos
  • É a principal linguagem das aplicações web modernas, inclusive React

Referências para estudos:

https://www.w3schools.com/js/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

#VemProReact

npm 

  • É um enorme repositório de códigos
  • É um gerenciador de pacotes JavaScript
  • Permite instalarmos bibliotecas auxiliares e vincularmos aos nossos projetos

Node Package Manager

Referências para estudos:

https://docs.npmjs.com/

#VemProReact

npx

  • Pacote npm nativo
  • Permite executar um pacote sem a necessidade de instalá-lo
  • Sempre executará a última versão do pacote
  • Pode executar um comando

npm package executor

Referências para estudos:

https://www.npmjs.com/package/npx

#VemProReact

Yarn

  • É um gerenciador de pacotes baseado no npm
  • Utiliza exatamente o mesmo repositório de pacotes do npm
  • Tem um sistema de cache mais otimizado
  • Tem alguns comandos bem úteis

Referências para estudos:

https://yarnpkg.com/en-US/doc/

#VemProReact

React

Falamos de HTML, CSS, JavaScript, Yarn...

Orrax, mas este curso não era de React?

Calma que eu consigo explicar!

#VemProReact

React

Resumindo e traduzindo para um português simples e claro:

Tudo isto faz parte do ecossistema React!

Com o Yarn, vamos instalar a biblioteca React, @bayon (e outras), que por sua vez, utilizam HTML, CSS e JavaScript

#AgoraTudoFazSentido

#VemProReact

Dúvidas?

#VemProReact

Momento "Uai É"?

Existe um pacote npm chamado create-react-app que cria toda a estrutura inicial de um projeto React

https://github.com/facebook/create-react-app

#VemProReact

Atividade!

  1. Instalar o Visual Studio Code ou outro editor de sua preferência
     
  2. Instalar o Node.js (v12.16.1)
     
  3. Instalar o Yarn (v1.22.4)
     
  4. Criar um projeto React utilizando o create-react-app

#VemProReact

Obrigado!

#VemProReact #JEP #1

By Softplan Planejamento e Sistemas

Made with Slides.com

#VemProReact #JEP #1

React; HTML; CSS; JavaScript; npm; Yarn

  • 588

More from Softplan Planejamento e Sistemas